css - 如何使用 CSS 绘制复选标记/勾号？

Question

如何使用 CSS绘制刻度符号？我使用 Unicode 找到的符号不美观。

编辑 图标字体是一个很好的建议。我在找类似 this 的东西.

Answer 1

您可以绘制两个矩形并将它们并排放置。然后旋转45度。修改任何变体的宽度/高度/顶部/左侧参数。

DEMO 1

DEMO 2 (With circle)

HTML

<span class="checkmark">
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

CSS

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}