45个值得收藏的CSS形状

22.无穷大

#infinity {  
position: relative;  
width: 212px;  
height: 100px;  
box-sizing: content-box;  
}  
#infinity:before,  
#infinity:after {  
content: "";  
box-sizing: content-box;  
position: absolute;  
top: 0;  
left: 0;  
width: 60px;  
height: 60px;  
border: 20px solid red;  
border-radius: 50px 50px 0 50px;  
transform: rotate(-45deg);  
}  
#infinity:after {  
left: auto;  
right: 0;  
border-radius: 50px 50px 50px 0;  
transform: rotate(45deg);  
}  

23.菱形

#diamond {  
width: 0;  
height: 0;  
border: 50px solid transparent;  
border-bottom-color: red;  
position: relative;  
top: -50px;  
}  
#diamond:after {  
content: '';  
position: absolute;  
left: -50px;  
top: 50px;  
width: 0;  
height: 0;  
border: 50px solid transparent;  
border-top-color: red;  
}  

24.钻石

#diamond-shield {  
width: 0;  
height: 0;  
border: 50px solid transparent;  
border-bottom: 20px solid red;  
position: relative;  
top: -50px;  
}  
#diamond-shield:after {  
content: '';  
position: absolute;  
left: -50px;  
top: 20px;  
width: 0;  
height: 0;  
border: 50px solid transparent;  
border-top: 70px solid red;  
}  

25.钻戒

#diamond-narrow {  
width: 0;  
height: 0;  
border: 50px solid transparent;  
border-bottom: 70px solid red;  
position: relative;  
top: -50px;  
}  
#diamond-narrow:after {  
content: '';  
position: absolute;  
left: -50px;  
top: 70px;  
width: 0;  
height: 0;  
border: 50px solid transparent;  
border-top: 70px solid red;  
}  

（编辑：晋中站长网）

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