45个值得收藏的CSS形状

36.雪佛龙

#chevron {  
position: relative;  
text-align: center;  
padding: 12px;  
margin-bottom: 6px;  
height: 60px;  
width: 200px;  
}  
#chevron:before {  
content: '';  
position: absolute;  
top: 0;  
left: 0;  
height: 100%;  
width: 51%;  
background: red;  
transform: skew(0deg, 6deg);  
}  
#chevron:after {  
content: '';  
position: absolute;  
top: 0;  
right: 0;  
height: 100%;  
width: 50%;  
background: red;  
transform: skew(0deg, -6deg);  
}  

37.放大镜

#magnifying-glass {  
font-size: 10em;  
display: inline-block;  
width: 0.4em;  
box-sizing: content-box;  
height: 0.4em;  
border: 0.1em solid red;  
position: relative;  
border-radius: 0.35em;  
}  
#magnifying-glass:before {  
content: "";  
display: inline-block;  
position: absolute;  
right: -0.25em;  
bottom: -0.1em;  
border-width: 0;  
background: red;  
width: 0.35em;  
height: 0.08em;  
transform: rotate(45deg);  
}  

38.Facebook图标

#facebook-icon {  
background: red;  
text-indent: -999em;  
width: 100px;  
height: 110px;  
box-sizing: content-box;  
border-radius: 5px;  
position: relative;  
overflow: hidden;  
border: 15px solid red;  
border-bottom: 0;  
}  
#facebook-icon:before {  
content: "/20";  
position: absolute;  
background: red;  
width: 40px;  
height: 90px;  
bottom: -30px;  
right: -37px;  
border: 20px solid #eee;  
border-radius: 25px;  
box-sizing: content-box;  
}  
#facebook-icon:after {  
content: "/20";  
position: absolute;  
width: 55px;  
top: 50px;  
height: 20px;  
background: #eee;  
right: 5px;  
box-sizing: content-box;  
}  

（编辑：惠州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!