纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到C...

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到C...

大家都在看

进入社区图片中心

loading...

loading..

loading...

今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。1、正方形最终效果：

CSS代码如下：
2、长方形最终效果：

CSS代码如下：
3、圆形最终效果：

CSS代码如下：
4、椭圆最终效果：

CSS代码如下：
5、上三角最终效果：

CSS代码如下：
6、下三角最终效果：

CSS代码如下：

阅\读:2048 | 评论:6网友评论∶

巨优网络发表于 2017-9-8 11:35:18

25、12角星最终效果：
CSS代码如下： 26、8角星最终效果：
CSS代码如下： 27、钻石最终效果：
CSS代码如下： 28、阴阳八卦（霸气的这个）
CSS代码如下：

巨优网络发表于 2017-9-8 11:34:26

20、爱心最终效果：
CSS代码如下： 21、无穷大符号最终效果：
CSS代码如下： 22、鸡蛋最终效果
CSS代码如下：

巨优网络发表于 2017-9-8 11:34:07

17、五角大楼最终效果：
CSS代码如下： 18、六边形最终效果：
CSS代码如下： 19、八角形最终效果：
CSS代码如下：

巨优网络发表于 2017-9-8 11:33:34

12、右下三角最终效果：
CSS代码如下： 13、平行四边形最终效果：
CSS代码如下： 14、梯形最终效果：
CSS代码如下： 15、六角星最终效果：
CSS代码如下： 16、五角星最终效果：
CSS代码如下：

巨优网络发表于 2017-9-8 11:33:05

7、左三角最终效果：
CSS代码如下： 8、右三角最终效果：
CSS代码如下： 9、左上三角最终效果：
CSS代码如下： 10、右上三角最终效果：
CSS代码如下： 11、左下三角最终效果：
CSS代码如下：

我来说两句∶

欢迎您，请 [登录] 或 [注册] 发言!