css可以通过设置border属性的透明度来绘制三角形。 想得到正三角形的话，把剩下的三边的颜色做成透明就可以了。
css画三角形的原理
让我们先看看代码：
将div的width和height设定为100px，四边形的宽度设定为100px，分别设定颜色后。
#triangle-up {
width: 100px；
height: 100px；
border :100 pxsolidtransparent；
border-right : 100 px固态硬盘；
border-left : 100 px固态蓝色；
border-top :100 pxsolidyellow；
边框- bottom :100 px实体绿色；
}
效果图表：
此时，如果将此div的“height”和“width”设置为0，但不进行其他更改，则会获得以下图形效果：
上面的效果是不是有很多三角形呢？ 但是我们只想要一个三角形，所以把其他三个三角形的颜色弄白的话，就只剩下一个了。 那么，如何使其他三角形的颜色背景变白呢？
css具有一个名为transparent的属性，背景是透明的。 这样，就可以达到我们的目的，在css上画三角形。
接下来，我们来看看具体的css绘制三角形的代码：
#triangle{
width: 0；
height: 0；
border :100 pxsolidtransparent；
边框- bottom 3360100 pxsolidblue；
}
效果图表：
有时会出现高度和底部长度有限制的三角形，那么使用css是怎么画的呢？
通过上面的css绘制三角形的代码，可以看到三角形的底部是边框的两倍，边框底部是三角形的高度。 在那里可以通过设定边框-边框或边框的值来改变底部和高度。
css绘制高度和底部长度受限三角形的代码如下。
要更改边框底部的值：
#triangle{
width: 0；
height: 0；
border :100 pxsolidtransparent；
边框- bottom 3360220 pxsolidblue；
}
效果图表：
更改边框值：
#triangle{
width: 0；
height: 0；
border :60 pxsolidtransparent；
边框- bottom 3360100 pxsolidblue；
}
效果图表：