CSS绘制三角形

版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/83068903

CSS 绘制各种三角形

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

⬆️向上

.triangle {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}

➡️向右

.triangle {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 100px solid red;
}

⬇️向下

.triangle {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}

⬅️向左

.triangle {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right: 100px solid red;
}

↗️向右上

.triangle {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-left: 100px solid transparent;
}

↖️向左上

.triangle {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-right: 100px solid transparent;
}

↘️向右下

.triangle {
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-left: 100px solid transparent;
}

8. ↙️向左下

.triangle {
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-right: 100px solid transparent;
}