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

39.月亮

#moon {  
width: 80px;  
height: 80px;  
border-radius: 50%;  
box-shadow: 15px 15px 0 0 red;  
}  

40.旗

#flag {  
width: 110px;  
height: 56px;  
box-sizing: content-box;  
padding-top: 15px;  
position: relative;  
background: red;  
color: white;  
font-size: 11px;  
letter-spacing: 0.2em;  
text-align: center;  
text-transform: uppercase;  
}  
#flag:after {  
content: "";  
position: absolute;  
left: 0;  
bottom: 0;  
width: 0;  
height: 0;  
border-bottom: 13px solid #eee;  
border-left: 55px solid transparent;  
border-right: 55px solid transparent;  
}  

41.圆锥

#cone {  
width: 0;  
height: 0;  
border-left: 70px solid transparent;  
border-right: 70px solid transparent;  
border-top: 100px solid red;  
border-radius: 50%;  
}  

42.十字架

#cross {  
background: red;  
height: 100px;  
position: relative;  
width: 20px;  
}  
#cross:after {  
background: red;  
content: "";  
height: 20px;  
left: -40px;  
position: absolute;  
top: 40px;  
width: 100px;  
}  

43.根基

#base {  
background: red;  
display: inline-block;  
height: 55px;  
margin-left: 20px;  
margin-top: 55px;  
position: relative;  
width: 100px;  
}  
#base:before {  
border-bottom: 35px solid red;  
border-left: 50px solid transparent;  
border-right: 50px solid transparent;  
content: "";  
height: 0;  
left: 0;  
position: absolute;  
top: -35px;  
width: 0;  
}  

（编辑：ASP站长网）