45个值得收藏的CSS形状

44.指示器

#pointer {  
width: 200px;  
height: 40px;  
position: relative;  
background: red;  
}  
#pointer:after {  
content: "";  
position: absolute;  
left: 0;  
bottom: 0;  
width: 0;  
height: 0;  
border-left: 20px solid white;  
border-top: 20px solid transparent;  
border-bottom: 20px solid transparent;  
}  
#pointer:before {  
content: "";  
position: absolute;  
right: -20px;  
bottom: 0;  
width: 0;  
height: 0;  
border-left: 20px solid red;  
border-top: 20px solid transparent;  
border-bottom: 20px solid transparent;  
}  

45.锁

#lock {  
font-size: 8px;  
position: relative;  
width: 18em;  
height: 13em;  
border-radius: 2em;  
top: 10em;  
box-sizing: border-box;  
border: 3.5em solid red;  
border-right-width: 7.5em;  
border-left-width: 7.5em;  
margin: 0 0 6rem 0;  
}  
#lock:before {  
content: "";  
box-sizing: border-box;  
position: absolute;  
border: 2.5em solid red;  
width: 14em;  
height: 12em;  
left: 50%;  
margin-left: -7em;  
top: -12em;  
border-top-left-radius: 7em;  
border-top-right-radius: 7em;  
}  
#lock:after {  
content: "";  
box-sizing: border-box;  
position: absolute;  
border: 1em solid red;  
width: 5em;  
height: 8em;  
border-radius: 2.5em;  
left: 50%;  
top: -1em;  
margin-left: -2.5em;  
} 

（编辑：晋中站长网）

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