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

参考资料http://caibaojian.com/css-border-triangle.html

转载于:https://www.cnblogs.com/sameen/p/5347907.html