结合阿里图标实现3/4五角星书写 css-CSDN博客

首先看哈效果

最近公司要实现这种根据分数不同显示五角星进度的项目，在网上查了一下，大多都是只能显示一整颗星的css代码，于是自己研究了一下，结合阿里图标写了一个，关键代码如下：

<link rel="stylesheet" href="iconfont/iconfont.css"> //引入阿里图标文件
<style>
        .starFive{margin-top: 1.15rem;}
        .starFive i {display: block;float: left;font-size: 1.32rem;
            text-align: center;color: #cacaca;width: 1.32rem;height: 1.32rem;line-height: 1.32rem;
            margin-right: 0.07rem;position: relative;overflow: hidden;white-space: pre;
        }
        .starFive i:before {position: absolute;
            left: 0;top: 0;display: block;width: 100%;
            overflow: hidden;color: #f6a838;
        }
        .starFive i:after{
            content: "\e707"; //五角星图标对应的content内容
        }
        .sF1 .flag:before{width: 70%;}

        .noselect:before{
            color: #cacaca !important;
        }
</style>
<p class='starFive sF1 clearfix'>
    <i class='iconfont icon-wujiaoxing'></i>
    <i class='iconfont icon-wujiaoxing'></i>
    <i class='iconfont icon-wujiaoxing'></i>
    <i class='iconfont icon-wujiaoxing flag'></i>
    <i class='iconfont icon-wujiaoxing noselect'></i>
</p>

该方法主要用css伪元素 (Pseudo-elements)，不懂的可以看哈以下链接：

http://www.w3school.com.cn/css/css_pseudo_elements.asp

参考：http://www.cnblogs.com/sxs161028/p/7249966.html

转载于:https://my.oschina.net/u/3689373/blog/1538987