CSS中的右上角打勾,是许多网站和应用程序中经常使用的一种UI设计元素。它可以用于表示完成了某项任务或操作,或者用于标记文本中的项目。这种打勾效果可以通过CSS的伪元素和背景图像属性来实现。
.checkmark { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0e8ce4; } .checkmark:after { content: ""; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
这段CSS代码首先创建了一个圆形的
元素,并设置了它的宽度、高度和边框样式。之后,使用伪元素:after来添加打勾的形状。这个:before伪元素创建一个空的内容区域,并设置绝对定位、边界和角度变换,以形成一个像打勾的形状。使用:before伪元素而不是背景图像属性是为了能更精确地控制打勾的位置和样式。