CSS-Learning | 纯CSS画三角形

最新推荐文章于 2024-10-22 17:59:00 发布

原创最新推荐文章于 2024-10-22 17:59:00 发布 · 203 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #三角形

CSS学习专栏收录该内容

21 篇文章

订阅专栏

本文介绍了两种使用CSS绘制三角形的方法：一是通过调整元素边框实现，二是利用线性渐变背景。前者通过设定特定宽度的边框并将其颜色设为透明来形成三角形轮廓，后者则使用线性渐变的特性，使背景颜色在指定方向上从透明过渡到实色，从而形成三角形形状。

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

使用CSS画三角形有很多方法，以下将介绍两种常见的方法：使用边框法和使用CSS渐变。

使用边框

首先，我们创建一个带边框的div


.triangle {
	border-width: 30px;
	height: 40px;
	width: 40px;
	border-color: red green blue brown;
	border-style: solid;
}

<div class="triangle"></div>

将内容设置为空: width: 0, height: 0

.triangle {
	border-width: 30px;
	height: 0;
	width: 0;
	border-color: red green blue brown;
	border-style: solid;
}

最后将不需要的边框颜色设置为transparent。

.triangle {
	border-width: 30px;
	height: 0;
	width: 0;
	border-color: red transparent transparent transparent;
	border-style: solid;
}

这样子就实现了向下的三角形。但是下边框还是占了空间，我们改进一下css代码，如下：

.triangle {
	border-width: 30px 30px 0 30px;
	height: 0;
	width: 0;
	border-color: red transparent transparent transparent;
	border-style: solid;
}

使用CSS渐变

使用渐变中的line-gradient，如下例所示：


.triangle {
	height: 40px;
	width: 40px;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0)
}

<div class="triangle"></div>