背景色三角形,只需改变 transparent(透明色) 就可改变方向,border-color 依次为上右下左
<div class="border-down"></div>
.border-down {
width: 0;
border-width: 20px;
border-style: solid;
border-color: black transparent transparent transparent;
position: relative;
}
空心三角形,方法其实和填充三角形一样,都是只需要改变 transparent(透明色) 就可改变方向,利用两个三角形定位实现空心三角形
<div class="border-down">
<span></span>
</div>
.border-down {
width: 0;
border-width: 20px;
border-style: solid;
border-color: black transparent transparent transparent;
position: relative;
}
.border-down span {
width: 0;
border-width: 18px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
position: absolute;
top: -20px;
left: -18px;
}