45个值得收藏的CSS形状(7)

30. 12点 爆发

#burst-12 {  
background: red;  
width: 80px;  
height: 80px;  
position: relative;  
text-align: center;  
}  
#burst-12:before,  
#burst-12:after {  
content: "";  
position: absolute;  
top: 0;  
left: 0;  
height: 80px;  
width: 80px;  
background: red;  
}  
#burst-12:before {  
transform: rotate(30deg);  
}  
#burst-12:after {  
transform: rotate(60deg);  
}  

31. 8点 爆发

#burst-8 {  
background: red;  
width: 80px;  
height: 80px;  
position: relative;  
text-align: center;  
transform: rotate(20deg);  
}  
#burst-8:before {  
content: "";  
position: absolute;  
top: 0;  
left: 0;  
height: 80px;  
width: 80px;  
background: red;  
transform: rotate(135deg);  
}  

32.太极

#yin-yang {  
width: 96px;  
box-sizing: content-box;  
height: 48px;  
background: #eee;  
border-color: red;  
border-style: solid;  
border-width: 2px 2px 50px 2px;  
border-radius: 100%;  
position: relative;  
}  
#yin-yang:before {  
content: "";  
position: absolute;  
top: 50%;  
left: 0;  
background: #eee;  
border: 18px solid red;  
border-radius: 100%;  
width: 12px;  
height: 12px;  
box-sizing: content-box;  
}  
#yin-yang:after {  
content: "";  
position: absolute;  
top: 50%;  
left: 50%;  
background: red;  
border: 18px solid #eee;  
border-radius: 100%;  
width: 12px;  
height: 12px;  
box-sizing: content-box;  
}  

（编辑：ASP站长网）