使用CSS绘制星级评分效果的方法

先来看一下CSS绘制五角星的基本方法：

1.     #star-five {   
2.    margin: 50px 0;   
3.    position: relative;   
4.    display: block;   
5.    color: red;   
6.    width: 0px;   
7.    height: 0px;   
8.    border-right:  100px solid transparent;   
9.    border-bottom: 70px  solid red;   
10.    border-left:   100px solid transparent;   
11.    -moz-transform:    rotate(35deg);   
12.    -webkit-transform: rotate(35deg);   
13.    -ms-transform:     rotate(35deg);   
14.    -o-transform:      rotate(35deg);   
15. }   
16. #star-five:before {   
17.    border-bottom: 80px solid red;   
18.    border-left: 30px solid transparent;   
19.    border-right: 30px solid transparent;   
20.    position: absolute;   
21.    height: 0;   
22.    width: 0;   
23.    top: -45px;   
24.    left: -65px;   
25.    display: block;   
26.    content: "";   
27.    -webkit-transform: rotate(-35deg);   
28.    -moz-transform:    rotate(-35deg);   
29.    -ms-transform:     rotate(-35deg);   
30.    -o-transform:      rotate(-35deg);   
31.   
32. }   
33. #star-five:after {   
34.    position: absolute;   
35.    display: block;   
36.    color: red;   
37.    top: 3px;   
38.    left: -105px;   
39.    width: 0px;   
40.    height: 0px;   
41.    border-right: 100px solid transparent;   
42.    border-bottom: 70px solid red;   
43.    border-left: 100px solid transparent;   
44.    -webkit-transform: rotate(-70deg);   
45.    -moz-transform:    rotate(-70deg);   
46.    -ms-transform:     rotate(-70deg);   
47.    -o-transform:      rotate(-70deg);