想要实现纯CSS写出对勾,需要用到CSS3的伪元素::before和::after。
.checkmark { position: relative; display: inline-block; width: 16px; height: 16px; } .checkmark::before, .checkmark::after { content: ''; position: absolute; width: 2px; height: 8px; background-color: #000; } .checkmark::before { transform: rotate(45deg); top: 2px; left: 6px; } .checkmark::after { transform: rotate(-45deg); bottom: 2px; left: 4px; }
以上就是实现对勾的全部代码,现在解释一下代码的含义:
- 首先我们创建了一个类名为checkmark的元素,并设置其宽高为16px。
- 然后,我们使用伪元素::before和::after分别创建一个竖线和斜线来拼凑出对勾图案。
- 竖线和斜线都被设置成黑色背景颜色,并通过transform旋转达到对勾的形态。
- 接着,我们设置竖线的相对位置为top:2px,left:6px,斜线的相对位置为bottom:2px,left:4px。
通过以上CSS代码,我们就成功实现了通过纯CSS方式创建出了一个对勾的图案。