步骤一：画一个宽高为400px的圆，加上阴影。
步骤二：利用伪类实现左右两个半圆，一黑一白。宽为200px，高为400px
步骤三：依次画两个宽高都为200px的圆，一黑一白。上下定位。
步骤四：组后两个黑白小圆，加上，布局效果搞定。
步骤五：添加上动画效果。
#star-five {margin: 60px 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)
-ms-transform: rotate(-70deg)
-o-transform: rotate(-70deg)
content: ''
}
<div id="star-five"></div>
