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了吧!