45个值得收藏的CSS形状

9.左上角

#triangle-topleft {  
width: 0;  
height: 0;  
border-top: 100px solid red;  
border-right: 100px solid transparent;  
}  

10.右上角

#triangle-topright {  
width: 0;  
height: 0;  
border-top: 100px solid red;  
border-left: 100px solid transparent;  
}  

11.左下角

#triangle-bottomleft {  
width: 0;  
height: 0;  
border-bottom: 100px solid red;  
border-right: 100px solid transparent;  
}  

12.右下角

#triangle-bottomright {  
width: 0;  
height: 0;  
border-bottom: 100px solid red;  
border-left: 100px solid transparent;  
}  

13.箭头

#curvedarrow {  
position: relative;  
width: 0;  
height: 0;  
border-top: 9px solid transparent;  
border-right: 9px solid red;  
transform: rotate(10deg);  
}  
#curvedarrow:after {  
content: "";  
position: absolute;  
border: 0 solid transparent;  
border-top: 3px solid red;  
border-radius: 20px 0 0 0;  
top: -12px;  
left: -9px;  
width: 12px;  
height: 12px;  
transform: rotate(45deg);  
}  

14.梯形

#trapezoid {  
border-bottom: 100px solid red;  
border-left: 25px solid transparent;  
border-right: 25px solid transparent;  
height: 0;  
width: 100px;  
}  

（编辑：西安站长网）

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