使用CSS繪制星級評分效果的方法

這篇文章主要介紹了使用CSS繪制星級評分效果的方法,當然要動態地使用鼠標點擊打分還需要使用JavaScript腳本,本文只講述繪制部分,需要的朋友可以參考下

先來看一下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;