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