CSS3常见技巧（二）：如何用CSS3来实现三角形？

站长博客：https://www.pipipi.net/

如何使用CSS3来画一个三角形常常使人很是感到困惑，其实原理上是宽度相等的边距以45度来链接。

首先看第一个图

这个是正常状况下，若是咱们这个时候把顶部的边距设为none的话就会显示下面这种状况

再把content宽度设为0

再把content高度设为0

这个时候，很容易联想到把左右边距颜色设为透明色（transparent）

大体过程就是如此，总结一下就是若是我想到一个三角形，好比它的方向就是向左的，那么只要设置它相反放下的颜色不为透明，并把其余两个方向设为透明便可。
代码以下：

.right{
            width:0;
            height:0;
            border-top:20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid pink;
        }
        .top{
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right:  20px solid transparent;
            border-bottom: 20px solid pink;
        }
        .left{
            width: 0;
            height:0;
            border-right:  20px solid pink;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent
        }
        .bottom{
            width: 0;
            height: 0;
            border-top: 20px solid pink;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

实现效果如图