【CSS】用CCS画三角形（含直角三角形）

SEVLT

于 2019-12-26 22:23:07 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS 三角形

本文链接：https://blog.csdn.net/sunqi568/article/details/103723393

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用CSS的border属性来创建三角形，通过调整div的高度和宽度为0，以及设置不同边框颜色的透明度，可以实现三角形的绘制。同时，详细解释了如何通过改变border-width来制作直角三角形，具体步骤包括从一个四边形减去不需要的边框，最终展示了一个实用的CSS技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：利用div的border属性变换得到三角形。

step1：首先画一个宽度、高度、边框都为50px的div，且边框颜色为四种不同颜色：
.triangle {
	height: 50px;
	width: 50px;
	border: 50px solid red;
	border-top-color: blue;
	border-right-color: black;
	border-bottom-color: green;
}

step2：可以看到，每个边框均为梯形，要想得到三角形，可以让梯形的上底等于零，即div的heigth=0，width=0：
.triangle {
	height: 0px;
	width: 0px;
	border: 50px solid red;
	border-top-color: blue;
	border-right-color: black;
	border-bottom-color: green;
}

step3：此时已得到四个三角形，把其中三个边框的颜色设置透明即可得到一个三角形，例如只保留上图红色三角形：
.triangle {
	height: 0px;
	width: 0px;
	border: 50px solid red;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
}

step4：如果想要得到直角三角形，只需把某一个边框的border-width设为0，例如把蓝色边框border-width设为0：
.triangle {
	height: 0px;
	width: 0px;
	border: 50px solid red;
	border-top-color: blue;
	border-right-color: black;
	border-bottom-color: green;
	border-top-width: 0px;
}
此时得到红色、黑色两个直角三角形。