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

19.六边形

#hexagon {  
width: 100px;  
height: 55px;  
background: red;  
position: relative;  
}  
#hexagon:before {  
content: "";  
position: absolute;  
top: -25px;  
left: 0;  
width: 0;  
height: 0;  
border-left: 50px solid transparent;  
border-right: 50px solid transparent;  
border-bottom: 25px solid red;  
}  
#hexagon:after {  
content: "";  
position: absolute;  
bottom: -25px;  
left: 0;  
width: 0;  
height: 0;  
border-left: 50px solid transparent;  
border-right: 50px solid transparent;  
border-top: 25px solid red;  
}  

20.八边形

#octagon {  
width: 100px;  
height: 100px;  
background: red;  
position: relative;  
}  
#octagon:before {  
content: "";  
width: 100px;  
height: 0;  
position: absolute;  
top: 0;  
left: 0;  
border-bottom: 29px solid red;  
border-left: 29px solid #eee;  
border-right: 29px solid #eee;  
}  
#octagon:after {  
content: "";  
width: 100px;  
height: 0;  
position: absolute;  
bottom: 0;  
left: 0;  
border-top: 29px solid red;  
border-left: 29px solid #eee;  
border-right: 29px solid #eee;  
}  

21.爱心

#heart {  
position: relative;  
width: 100px;  
height: 90px;  
}  
#heart:before,  
#heart:after {  
position: absolute;  
content: "";  
left: 50px;  
top: 0;  
width: 50px;  
height: 80px;  
background: red;  
border-radius: 50px 50px 0 0;  
transform: rotate(-45deg);  
transform-origin: 0 100%;  
}  
#heart:after {  
left: 0;  
transform: rotate(45deg);  
transform-origin: 100% 100%;  
}  

（编辑：ASP站长网）