CSS绘制三角形

CSS绘制三角形

先放代码：

div{
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: lightcoral transparent transparent transparent;
}

效果图：

其实原理很简单，但不知道的同学可能会一脸懵；

CSS画三角形是利用盒子模型的border实现的，多半同学不理解的原因就是因为对border存在误解。大多数同学会认为border就是一个四四方方的边框，但实际上元素的border由三角形组成。看下面代码：

div{
    // 这里将内存的尺寸设置为0
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: lightcoral lightcyan lightseagreen lightsalmon;
}

效果图：

没想到吧！这样一来绘制三角形就显得格外简单了，只需要将其他三个三角形设置成透明色就好了，现在回去看开头的代码就很easy了吧！