利用border画三角形
- 一个盒子包括: margin+border+padding+content
- 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
- 调整宽度大小可以调节三角形形状.
有颜色的区域是border:
内容为0的时候(width: 0; height: 0;)
so,当其中一边有颜色,其他三边设置为透明(transparent),三角形就出来啦!
but,IE6不支持透明..
不用担心,有招:
IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果~
或者,不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的哦
#test4 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:20px;
}