css+字体实现五角星（半颗星、1/3颗星）评分效果

1. .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;} 
2.         *{margin:0; padding:0;} 
3.  
4.         /*字体路径按照你的路径去修改*/ 
5.          @font-face { 
6.             font-family: 'AlluraRegular'; 
7.             src: url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.eot'), 
8.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'),  
9.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.woff') format('woff'), 
10.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'), 
11.                  url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg'); 
12.         } 
13.         .starFive span {display: block;float: left;font-size: 25px; font-family: 'AlluraRegular'; 
14.             text-align: center;color: #888;width: 27px;height: 33px;line-height: 33px; 
15.             margin-right: 5px;position: relative;overflow: hidden;white-space: pre; 
16.          } 
17.         .starFive span:before {position: absolute; 
18.             left: 0;top: 0;display: block;width: 50%; 
19.             content: attr(data-content);overflow: hidden;color: #F63; 
20.         } 
21.         .sF1 span:before{width: 70%;} 
22.         .sF2 span:before{width: 50%;} 
23.         .sF3 span:before{width: 40%;} 
24.         .starFive .org_star {color: #F63;} 
25.         .starFive b {font-weight: normal; line-height: 40px; 
26.             font-size: 25px;color: #888;margin-left: 10px; 
27.         } 

 html内容
 

1. <div> 
2.       <p class='cleanfloat starFive sF1'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><b>4.7分</b></p> 
3.       <p class='cleanfloat starFive sF2'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><b>3.5分</b></p> 
4.       <p class='cleanfloat starFive sF3'><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><span>R</span><b>2.4分</b></p> 
5.  </div>