实心三角形
方式一
triangle.jpg
.triangle {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: green purple yellow blue;
}
如果需要哪个方向的按钮，只需要修改边框宽度，保留对应位置的颜色，其他的颜色设置为透明transparent
.triangle {
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent yellow transparent;
}
方式二
triangle2.jpg
当一个边没有的时候，它会缩小成一个点，这时就形成了一个三角形
.triangle {
width: 0px;
height: 0px;
border-bottom: 100px solid yellow;
border-left: 90px solid black;
border-right: 90px solid black;
}
如果需要哪个方向的三角形，就将这个方向的颜色保留，相对方向的样式去掉，相邻两个方向的颜色设置为透明transparent
.triangle {
width: 0px;
height: 0px;
border-bottom: 100px solid yellow;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
}
空心三角形
只需要先实现一个实心三角形，再实现一个相同的白色实心三角形，将白色实心三角形定位在之前的三角形上面，此时就形成了一个空心三角形。
白底边线
.triangle-line {
position: absolute;
top: -11px;
right: 24px;
z-index: 999;
height: 0px;
width: 0px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid rgba(80,80,80,0.1);
}
.triangle-line::after {
content: '.';
position: absolute;
top: 3px;
right: -5px;
z-index: 999;
height: 0px;
width: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid rgba(255,255,255,1);
}
