<style>
.box{
width: 20px;
height: 20px;
background-color: #424;
border: 10px solid #9C27B0;
border-top: 15px solid green;
}
</style>
<div class="box"></div>
这里我们可以看到一个梯形（实现小三角就是靠这个梯形）
我们把box宽度设为0看看
它现在已经可以看到一个小三角了 我们再将紫色背景设为透明 transparent
width: 0px;
height: 20px;
border: 10px solid transparent;
border-top: 15px solid green;
看 小三角出来了 我们可以不用旋转可以得到4个方向的小三角