教你用CSS玩转各种形状?

1,828 阅读2分钟


aa6ebf19-5ad1-4f00-bad6-59ff714772f7.jpg

很多小伙伴在做开发的时候,遇到一些要画很多形状的时候,就很纠结了,知道怎么用CSS去布局,就是不知道怎么画图案。

其实使用CSS可以绘制出很多形状,比如三角形,梯形,圆形,椭圆形等等,并不是只能画矩形。

今天的教程,就来教大家怎么去用CSS绘制这些图形吧。

为了方便大家去理解,今天分成基本形状和组合形状来一起讲解吧,基本形状是非常好理解的,再利用这些基本形状进行组合,就可以实现稍微复杂的组合形状了。

基本形状

三角形

1.jpg

微信图片_20190622165429.png

梯形

2.png

微信图片_20190622191625.png

圆形

3.png

微信图片_20190622192038.png

椭圆

4.png

微信图片_20190622192219.png

球体

5.png

微信图片_20190622192352.png

半圆

6.jpg

微信图片_20190622192520.png

菱形

7.png

微信图片_20190622192647.png

组合形状

心形

心形是由两个圆形和一个矩形进行组合得到的。

微信图片_20190622193000.png

8.jpg

微信图片_20190622193313.png

扇形

扇形是由一个圆形和一个矩形进行组合得到的,用矩形遮住圆形的一部分就形成了扇形。

微信图片_20190622193518.png

9.jpg

微信图片_20190622193544.png

五边形

五边形是由一个三角形和一个梯形进行组合得到的。

微信图片_20190622193729.png

10.jpg

微信图片_20190622193741.png

六边形

六边形是由两个三角形和一个矩形进行组合得到的。

微信图片_20190622193941.png

11.jpg

微信图片_20190622193952.png

长方体

长方体是由六个矩形进行组合得到的。

微信图片_20190622194352.png

12.jpg

12.1.jpg

12.2.jpg

12.3.png

微信图片_20190622194659.jpg

圆柱体

圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。

微信图片_20190622194851.png

13.png

13.1.jpg

微信图片_20190622194909.png

棱锥

棱锥是由四个三角形和一个矩形进行组合得到的。

微信图片_20190622195255.png

14.jpg

14.1.jpg

14.2.jpg

微信图片_20190622195324.jpg

最后

今天讲的内容里,有些可能大家会觉得有些比较难实现,其实你也可以使用 clip-path 这一个属性,绘制各种形状。

当然,CSS能绘制的东西,远不止这些。还有许多东西今天一下子讲不完,今天讲的都是比较基础的一些,对这个感兴趣的小伙伴可以后面自己去探索一下。