用 CSS 实现三角形

1. 利用 border 属性实现三角形  
    怎么border能实现三角形呢？是不是很神奇？别着急，先来看看一个梯形：
    
    


        .triangle{
            width:30px;
            height:30px;
            border-width:20px;
            border-style:solid;
            border-color:#e66161 #f3bb5b #94e24f #85bfda;
        }

     如果***width跟height都设置为0***，会出现什么样的效果呢？

    哈哈，结果就是四个梯形都变成了三角形了。
    
    


    可是只想要其中一个三角形，这怎么办？很简单，只要***把不需要的边框颜色都设成透明或和背景颜色相同的颜色***，比如说要上面红色的三角形，那么可以设置样式如下：

        .triangle{
            width:0;
            height:0;
            border-width:20px;
            border-style:solid dashed dashed dashed;
            border-color:#e66161 transparent transparent transparent;
        }

    结果就是这样子了：


    

推荐：

1. 用css可是实现三角形，但是借用bookstrap可以更简单地实现，比如：

    

<span class="caret"></span>

    其原理是借助上述的borde属性来控制的

    可以看看这篇文章的介绍：http://blog.sina.com.cn/s/blog_6c2c68a60102wigz.html

2. 使用font-some字体图标也能实现三角形，首先先引入font-some的样式文件

    

<link href="css/font-awesome.css" rel="stylesheet" />

    html:

        <i class="fa fa-sort-desc"></i>
        <i class="fa fa-sort-up"></i>    

本文参考：http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html

由睿江云人员提供，想了解更多，请登陆www.eflycloud.com