淘先锋技术网

首页 1 2 3 4 5 6 7

想要实现纯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方式创建出了一个对勾的图案。