css画三角的原理

当我们设置一个div其width与height为100px，并且设置其四边框的宽度为100px，且分别设置其颜色后，我们可以看到如下的一张图片



此时如果设置这个div的height为0的话，其他不变，会得到下面这个图形



下面把其宽度也设置为0后，得到如下的一张图片



删除border-bottom



设置border-left border-right 颜色为transparent



根据上面我们就可以根据不同的设置，实现各种三角形

总结如下：

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid #000;
border-right:100px solid transparent;
border-left:100px solid transparent;
}

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-bottom:100px solid blue;
border-right:100px solid transparent;
border-left:100px solid transparent;
}

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-right:100px solid red;
}

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-left:100px solid #00ff00;
}

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-bottom:100px solid blue;
border-left:100px solid transparent;
}

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid #transparent;
border-left:100px solid #00ff00;
}

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-top:100px solid #000;
border-left:100px solid trnasparent;
}

.demo {
width: 0px;
height: 0px;
margin: 100px auto;
border-bottom:100px solid transparent;
border-left:100px solid #00ff00;
}