CSS实现小三角小技巧

<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个方向的小三角