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;
}