css如何绘制一个等边三角形

我们首先绘制出一个一般的三角形,那么代码应该是如此的

<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>

此时我们就可以得到一个等边三角形啦
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42424269/article/details/88848553