教你用CSS玩转各类形状？

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

其实使用CSS能够绘制出不少形状，好比三角形，梯形，圆形，椭圆形等等，并非只能画矩形。

今天的教程，就来教你们怎么去用CSS绘制这些图形吧。

为了方便你们去理解，今天分红基本形状和组合形状来一块儿讲解吧，基本形状是很是好理解的，再利用这些基本形状进行组合，就能够实现稍微复杂的组合形状了。

基本形状

三角形

梯形

圆形

椭圆

球体

半圆

菱形

组合形状

心形

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

扇形

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

五边形

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

六边形

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

长方体

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

圆柱体

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

棱锥

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

最后

今天讲的内容里，有些可能你们会以为有些比较难实现，其实你也可使用 clip-path 这一个属性，绘制各类形状。

固然，CSS能绘制的东西，远不止这些。还有许多东西今天一会儿讲不完，今天讲的都是比较基础的一些，对这个感兴趣的小伙伴能够后面本身去探索一下。