|
transparent 是透明色，是系统默认的颜色
箭头绘制主要利用一个空元素，设置其边框为transparent，然后利用边框不同顶部的颜色达到显示箭头的目的
.banner {
width: 0px;
height: 0px;
/* 默认的背景颜色-透明 */
background-color: transparent;
margin: auto;
border: 30px solid red;
/* 上 */
border-color: red transparent transparent transparent;
/* 右 */
border-color: transparent red transparent transparent;
/* 下 */
border-color: transparent transparent red transparent;
/* 左 */
border-color: transparent transparent transparent red;
}
<div class="banner"></div>
其他都是透明色，只有一块是红色，因而实现透明箭头的绘制。
绘制其他形状
.nav {
width: 50px;
height: 50px;
background-color: transparent;
margin: 10px auto;
border: 100px solid transparent;
border-top-color: red;
border-radius: 50%;
}
<div class="nav"></div>
和上面一样，也就是背景变为透明，而把其中一部分的边框显示出来，并设置边框弧度。
参考链接:
https://blog.csdn.net/c__dreamer/article/details/80469884
https://blog.csdn.net/ssisse/article/details/52344180 | 
转播
