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>
其他都是透明色,只有一块是红色,因而实现透明箭头的绘制。
绘制其他形状