首先定义一个div 随便改个名字
定义样式:
思路是用border来宽度来实现小三角 先把4个边线设置成透明
.triangle {
width: 0;
height: 0;
border: 10px solid;
border-color: transparent;
}
分别定义小三角方向 比如想要倒立小三角 那么只需要把上边线添加颜色就好了
.triangle_top {
border-top-color: red;
}
<div class="triangle triangle_top"></div>
效果:
想要其他三个方向的小三角自己定义一下所需要方向的边线添加颜色就好了
border-top-color:
border-left-color:
border-bottom-color:
border-right-color: