CSS（一）

css写三角形

---

这个案例主要是应用了盒模型中的border的特性，HTML标签元素width：0；height：0；内容为空，多边形使用四个border边来完成。分别为：border-top；border-bottom；border-left；border-right；向上的三角形为，border-top为0，border-bottom为100，类型为solid，颜色为yellow，border-left和border-right为50，类型为solid，这里要把颜色设置为transparent（透明）。代码如下所示：

.triangle-up{        width: 0;        height:0;        border-top:0px solid yellow;        border-bottom:100px solid yellow;        border-left:50px solid transparent;        border-right:50px solid transparent;    }<div class="triangle-up"></div>

写多边形也是类似的，只将一个border边属性设为透明即可。trapezoid（梯形）代码如下：

.trapezoid{        width: 0;        height:0;        border-top:0px solid yellow;        border-bottom:100px solid yellow;        border-left:50px solid transparent;        border-right:50px solid transparent;    }<div class="trapezoid"></div>