想法是：对于一个“div”标签，一般是有宽（width）和高（height）以及边框的，如果我们保持这个div的边框大小不变，逐渐缩小width和height，最终结果会怎么样？，没错变成下面这样，宽高汇成中间一点，边框变成四个三角形，这样我们只要使想要显示的那个三角形有颜色和样式，另外三个设置成透明不就可以了。

mark

上代码：

HTML代码：

1
<div class="triangle"></div>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.triangle{
	width:0;
	height:0;

  /* IE6最小高度的问题 */
	overflow:hidden;

  border-width:50px;

	/*要显示的边设置为想要的颜色，其他边设置成透明*/
	border-color:transparent transparent red transparent;

  /* 将其他边的样式设置成虚线，
    解决IE6其他边显示为黑色的问题 */
	border-style:dashed dashed solid dashed;
}

注意里面的注释

结果为：

mark