background绘图区域

在线地址:https://codepen.io/amenging/pen/ajEmwm
可以看到div1和div2的背景绘图区域不一样,div1是默认的样式,而div2的背景区域明显可以看到是从padding-box开始绘制的,他们的区别就在于background-repeat属性值不同。
要解释这个问题,首先介绍一下几个属性:

background-clip,默认值:border-box
background-origin,默认值:padding-box
background-repeat,默认值:repeat

关于background-repeat,文档中有这样一句:

The image is repeated in this direction as often as needed to cover the background painting area.

另外:
background-origin决定绘图位置(background position area),background-clip决定绘图区域(background painting area)
所以div1和div2表现不一样的原因在于div1的background-repeat属性为repeat时,的绘图区域从border-box开始

绘制指示箭头

在线地址:https://codepen.io/amenging/pen/KBZaBx
效果图:

绘制菜单图标

三条线构成的菜单,鼠标放上去时显示x号
在线地址:https://codepen.io/amenging/pen/XBVpyL
效果图:

绘制心形

在线地址:https://codepen.io/amenging/pen/yxJMpP
效果图:

标签卡片

在线地址:https://codepen.io/amenging/pen/EeyWqJ
效果图: