用CSS对DIV画三角形

Veröffentlicht am

###1 原理
一个div，当它的宽和高都是0的时候，它便是一个点。
于是当给它border样式的时候，便发生了以下的变化：

1
2
3
4
5
6
7
8
9
10
<style>
	div {
		width: 0;
		height: 0;
		border-left: 100px solid yellow;
		border-right: 100px solid red;
		border-top: 100px solid blue;
		border-bottom: 100px solid green;
	}
</style>

图片

###2 画三角形方法
只需要将要保留的那边的三角形对应的border保留下来，而保留下来的三角行两边的border设为透明样式即可，比如我要保留右边三角形，只需要：

1
2
3
4
5
6
7
8
9
10
<style>
	div {
		width: 0;
		height: 0;
		/*border-left: 100px solid yellow;*/
		border-right: 100px solid red;
		border-top: 100px solid transparent;
		border-bottom: 100px solid transparent;
	}
</style>

三角形

其他同理可得，只需要将保留的border相邻两边的样式设为透明transparent即可。