45个值得保藏的CSS外形

CSS可以或许天生各类外形。正方形和矩形很轻易，由于它们是 web 的天然外形。添加宽度和高度，就获得了所需的准确巨细的矩形。添加边框半径，你就可以把这个外形酿成圆形，足够多的边框半径，你就可以把这些矩形酿成圆形和椭圆形。

我们还可以行使 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加其它两个外形的也许性。通过奇妙地行使定位、转换和很多其他能力，我们可以只用一个 HTML 元素在 CSS 中建设很多外形。

固然我们此刻多半行使字体图标可能svg图片，好像行使 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些能力及思绪是很值得我们的进修。

1.正方形

#square {  
width: 100px;  
height: 100px;  
background: red;  
}  

2.长方形

#rectangle {  
width: 200px;  
height: 100px;  
background: red;  
}  

3.圆形

#circle {  
width: 100px;  
height: 100px;  
background: red;  
border-radius: 50%  
}  

4.椭圆形

#oval {  
width: 200px;  
height: 100px;  
background: red;  
border-radius: 100px / 50px;  
}  

5.上三角

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

6.下三角

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

7.左三角

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

8.右三角

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

（编辑：湖南网）

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