padding 属性和 background-clip 属性配合，可以在有限的标签下实现一些 CSS 图形绘制效果，我这里举两个小例子，重在展示可行性。
例 1:不使用伪元素，仅一层标签实现大队长的“三道杠”分类图标效果。此效果在移动端比较常见，类似于图 1 最右边的小图标。
图 1 “三道杠”小图标示意
我们可以使用类似下面的 CSS 代码(10 倍大小模拟)实现:
.icon-menu {display: inline-block;width: 140px; height: 10px;padding: 35px 0;border-top: 10px solid;border-bottom: 10px solid;background-color: currentColor;background-clip: content-box;}
例 2:不使用伪元素，仅一层标签实现双层圆点效果。此效果在移动端也比较常见，类似于图 2，在多个广告图片切换时，用来标识当前显示的是哪张图。
图 2 双层圆点图形示意
我们可以使用类似下面的 CSS 代码(10 倍大小模拟)实现:
.icon-dot {display: inline-block;width: 100px; height: 100px;padding: 10px;border: 10px solid;border-radius: 50%;background-color: currentColor;background-clip: content-box;}
完整代码：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.icon-menu {display: inline-block;width: 140px;height: 10px;padding: 35px 0;border-top: 10px solid;border-bottom: 10px solid;background-color: currentColor;background-clip: content-box;}.icon-dot {display: inline-block;width: 100px;height: 100px;padding: 10px;border: 10px solid;border-radius: 50%;background-color: currentColor;background-clip: content-box;}</style></head><body><i class="icon-menu"></i><i class="icon-dot"></i></body>
</html>
效果图：
