使用css绘制三角形

将div绘制成三角形

在css中，div默认是矩形的，那么如何将一个div绘制成三角形呢？

实现原理

将div的width和height设置为0，将两对边的边框设置为相同长度且颜色透明，例如border-left:50px solid transparent; border-right:50px solid transparent，最后再将剩下一边的边框设置为有颜色的就可以了，例如border-bottom:100px solid aqua。

实现

.app{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid aqua;
    }

在上例中，border-left和border-right控制的是三角形的左右斜边，边框宽度越大，三角形斜边就越长，当两边的宽度相等时就可以实现等腰三角形。而border-bottom用于控制三角形的底边的方向和三角形高度，border-bottom的宽度越宽，三角形的高度就越高。假如底边是border-top，那么三角形的底边就会在上面，方向朝下：

.app{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid aqua;
    }

懂得原理后，我们就可以通过控制不同的参数，绘制出符合需求的三角形了。