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

posted @ 2016-04-02 17:41  Sameen  阅读(299)  评论(0编辑  收藏  举报