css画出小图标

 

根据设计稿，很多小图标可以使用css画出来。下面我来举几个项目中常见的例子！

这部分的图标样式一共就分为2中，一种是三角形，一种是特殊形状！

使用边框画三角形

从一个完整的矩形开始

        border-width: 10px;
        border-color: #333 ;
        border-style: solid;
        width:10px;
        height: 10px;    

 

如果是上三角形就把上边框宽度置为0，下三角形同理，这里画一个下三角形：

        border-width: 10px;
        border-color: #333 ;
        border-style: solid;
        width:10px;
        height: 10px;
        /* 下三角形 */
        border-bottom:none;

　　

将左右边框设置为透明：

        border-width: 10px;
        border-color: #333 ;
        border-style: solid;
        width:10px;
        height: 10px;
        /* 下三角形 */
        border-bottom:none;
        /* 左右边框设为透明 */
        border-left-color: transparent;
        border-right-color: transparent;

 

最后就是将宽度设置为0

        border-width: 10px;
        border-color: #333 ;
        border-style: solid;
        /* 宽度为0 */
        width:0px;
        height: 10px;
        /* 下三角形 */
        border-bottom:none;
        /* 左右边框设为透明 */
        border-left-color: transparent;
        border-right-color: transparent;

　　

综合设置

        border-width: 10px 10px 10px 0;
        border-color: transparent #333 ;
        border-style: solid;
        width:0px;
        height: 0px;

　　

以上是一个左三角形

 

实现项目的图标：

项目中第三项的价格后面的图标可以使用伪类：before和：after来实现，其实就是一个上三角形和下三角形的组合，

    .triangle{
        position: relative;
        width: 10px;
        height: 20px;
    }
    .triangle:after{
        content:'';
        border-width: 10px 10px 0;
        border-color:  #333 transparent ;
        border-style: solid;
        width:0px;
        height: 0px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .triangle:before{
        content:'';
        border-width: 0px 10px 10px;
        border-color: transparent transparent #333  ;
        border-style: solid;
        width:0px;
        height: 0px;
        position: absolute;
        top:-2px;
        left: 0;
    }

　　

后面就可以根据设计稿修改尺寸和颜色了。