图片来自 CHRIS COYIER
在前端开发中，你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容，为的就是更加熟悉了解它们，以便更好的使用它们。同时也也使用它一做了一些动画。 css3-animate。
这里说的用css做图形，其实是使用一个html元素，结合它的伪元素 ::before & ::after （不需要其他额外的非伪元素的html元素），然后定义样式来生成所需的图形。
这里不是说不可以使用其它的html元素，只是这样的好处是在html方便引入，而不需要每次引入都需要添加大量的html片段（夸张说法）。
主要方法
可以使用的样式属性如下：
* border * border-radius * transform * box-shadow
为了兼容性，使用pseudo-elements(::before, ::after) 和上面样式属性中的一种或几种随机组合。
当然，在前端我们经常使用的时svg和font-icon。
还用一种是css3的shape-outside实现文本环绕的效果。
这种单元素的css图形还是比较实用的。
图形分类
几何图形。如：三角形，正方形，矩形，平行四边形，五边形，六边形等
星形
卡通图形。如：吃豆人等
图标。 如：心形，箭头，锁，放大镜等。
作者：缘自世界
链接：https://www.jianshu.com/p/1406b44c981b
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦