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

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

CSS Code复制内容到剪贴板

    #star-five {   
   margin: 50px 0;   
   position: relative;   
   display: block;   
   color: red;   
   width: 0px;   
   height: 0px;   
   border-right:  100px solid transparent;   
   border-bottom: 70px  solid red;   
   border-left:   100px solid transparent;   
   -moz-transform:    rotate(35deg);   
   -webkit-transform: rotate(35deg);   
   -ms-transform:     rotate(35deg);   
   -o-transform:      rotate(35deg);   
}   
#star-five:before {   
   border-bottom: 80px solid red;   
   border-left: 30px solid transparent;   
   border-right: 30px solid transparent;   
   position: absolute;   
   height: 0;   
   width: 0;   
   top: -45px;   
   left: -65px;   
   display: block;   
   content: "";   
   -webkit-transform: rotate(-35deg);   
   -moz-transform:    rotate(-35deg);   
   -ms-transform:     rotate(-35deg);   
   -o-transform:      rotate(-35deg);   
  
}   
#star-five:after {   
   position: absolute;   
   display: block;   
   color: red;   
   top: 3px;   
   left: -105px;   
   width: 0px;   
   height: 0px;   
   border-right: 100px solid transparent;   
   border-bottom: 70px solid red;   
   border-left: 100px solid transparent;   
   -webkit-transform: rotate(-70deg);   
   -moz-transform:    rotate(-70deg);