CSS-利用border属性画三角形和梯形

最新推荐文章于 2022-10-13 11:37:03 发布

Huijie Xu

最新推荐文章于 2022-10-13 11:37:03 发布

阅读量998

点赞数

分类专栏：前端开发基础概念

本文链接：https://blog.csdn.net/Xu_cipu/article/details/101449018

版权

本文介绍了如何利用CSS的border属性来创建三角形和梯形。通过设置元素的高度和宽度为0，以及调整不同边的border颜色和长度，可以创造出不同形状的三角形。同时，通过保留非0高度和宽度并改变部分边的颜色，可以实现梯形的绘制。这种方法灵活且易于实现。

摘要由CSDN通过智能技术生成

首先，看一下border的延申效果：
定义一个正常显示的div
.triangle {
height: 200px;
width: 300px;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid black;
border-left: 50px solid yellow;
}
效果如图
在这里插入图片描述
可以发现，border的延申效果是成梯形的一个线条。那么，如果我们把中间div的大小设置为0，那么中间的白色区域则为一个点，即梯形中的一边消失，即可实现绘制三角形的目的。

三角形
修改如下：
.triangle {
height: 0px;
width: 0px;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid black;
border-left: 50px solid yellow;
}
效果如图
在这里插入图片描述
通过修改各边延申长度，可生产不规则三角形：
.triangle {
height: 0px;
widt