利用CSS实现各种三角形

前言

在做前端开发的时候，我们可能会遇到很多需要做三角形的情况，下面就介绍一下使用ＣＳＳ的transparent属性实现各种各样的三角形。

示例：（红色的正倒三角形）

.box{　　
    height: 0px;  //宽和高必须设为０px
    width: 0px;
    border-top:10px solid red;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
}

原理：

transparent属性明明是透明度，怎么会实现三角形呢？这个问题就需要好好了解一下border的构成了，我们都知道border是有宽度的，包裹在content外层，具体的示意图如下：

彩色的部分就表示边框，可以看出边框是由４个梯形组成的，如果将content的宽和高都设置为０px，那么，边框将会变成４个三角形组成（虽然在网页上是显示不出来的，但可以自行想象一下）。如下图：

如果这个时候我们在使用transparent属性，显示顶部的边框，然后将左边和右边的边框透明化，那么在网页上显示的就是上方的红色倒三角形，以此类推，我们可以组合形成各种各样的三角形。