注册/登录,欢迎光临!
加入收藏设为首页网站地图
您当前的位置:辛勤IT网 >> 网页设计 >> DIV+CSS >> css如何绘制一个等边三角形
热门:word | excel | powerpoint

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

2021/3/19 20:40:01 所属分类:网页设计 - DIV+CSS
内容提要:我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>

网页设计 | DIV+CSS
最近更新
推荐信息
关于我们 | 联系方式 | 对话本站 | 版权声明 | 所有信息