[分享]css3怎么画对号

CSS3可以很轻松地画出简单的图形，今天我们就来介绍一下如何使用CSS3画出一个对号。

.checkmark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #333;
    position: relative;
}

.checkmark:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 14px;
    border: 2px solid #333;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
    transform-origin: 0% 0%;
} 

首先我们需要创建一个圆形的div，设置宽度、高度和边框颜色，通过border-radius属性设置圆形。然后我们在该div上添加一个伪元素after，用于画对号。设置position为absolute，将left属性设置为0，即在圆点左侧，width属性设置为8px，height属性设置为14px，即对号的长度，边框颜色同样设为黑色，设置border-top和border-right属性来绘制对号的线段。transform属性设置旋转45度，再通过transform-origin属性改变旋转中心的位置。这样就完成了对号的绘制。