45个值得收藏的CSS形状

26.钻石2

#cut-diamond {  
border-style: solid;  
border-color: transparent transparent red transparent;  
border-width: 0 25px 25px 25px;  
height: 0;  
width: 50px;  
box-sizing: content-box;  
position: relative;  
margin: 20px 0 50px 0;  
}  
#cut-diamond:after {  
content: "";  
position: absolute;  
top: 25px;  
left: -25px;  
width: 0;  
height: 0;  
border-style: solid;  
border-color: red transparent transparent transparent;  
border-width: 70px 50px 0 50px;  
}  

27.蛋蛋

#egg {  
display: block;  
width: 126px;  
height: 180px;  
background-color: red;  
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
}  

28.吃豆人

#pacman {  
width: 0px;  
height: 0px;  
border-right: 60px solid transparent;  
border-top: 60px solid red;  
border-left: 60px solid red;  
border-bottom: 60px solid red;  
border-top-left-radius: 60px;  
border-top-right-radius: 60px;  
border-bottom-left-radius: 60px;  
border-bottom-right-radius: 60px;  
}  

29.对话泡泡

#talkbubble {  
width: 120px;  
height: 80px;  
background: red;  
position: relative;  
-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;  
}  
#talkbubble:before {  
content: "";  
position: absolute;  
right: 100%;  
top: 26px;  
width: 0;  
height: 0;  
border-top: 13px solid transparent;  
border-right: 26px solid red;  
border-bottom: 13px solid transparent;  
}  

（编辑：晋中站长网）

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