CSS-Learning | 纯CSS画三角形

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

以上就是两种使用CSS画三角形的方法。