用 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

转载于:https://my.oschina.net/u/3363053/blog/1531927