css如何实现三角形

css实现三角形

将一个div的宽度和高度设置为0，然后设置边框样式

div{
		width: 0;
		height: 0;
		border-top: 50px solid yellow;
		border-right: 50px solid yellowgreen;
		border-bottom: 50px solid greenyellow;
		border-left: 50px solid cornflowerblue;
}

将下边框的长度设置为0，实现一个最小空间的三角形

div{
	 width: 0;
	 height: 0;
	 border: 50px solid transparent;
	 /* border-top-color: cornflowerblue ; */
	 border-bottom: 50px solid greenyellow;
	}

上面产生的三角形，实质上占位还是一个正方形，所以应该将这个三角形占用的空间尽可能缩小，不设置下边框。

div{
	width: 0;
	height: 0;
	border-bottom: 50px solid coral;
	/* border-right: 100px solid cornflowerblue;
	border-left: 100px solid cadetblue; */
	border-right: 100px solid transparent;
	border-left: 100px solid transparent;
}