图片来自 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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦