我们首先绘制出一个一般的三角形,那么代码应该是如此的
<body>
<div class="triangle">
</div>
</body>
.triangle {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 40px solid lightblue;
width: 0px;
height: 0px;
}
对于等边三角形我们知道,高是边的sqrt(3)/2倍,所以如果高为40的话,两边就是差不多23
,所以我们可以得到
.triangle {
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 40px solid lightblue;
width: 0px;
height: 0px;
}
<body>
<div class="triangle">
</div>
</body>
此时我们就可以得到一个等边三角形啦