CSS中怎么打?qū)矗吭诰W(wǎng)頁設(shè)計(jì)中，打?qū)词且粋€(gè)常見的需求，可以用于勾選框、完成狀態(tài)等場(chǎng)景。下面我們來介紹如何用CSS打出簡(jiǎn)單的對(duì)勾。

/* 1. 用border實(shí)現(xiàn) */
.checkmark {
display: inline-block;
width: 16px;
height: 16px;
border: solid black;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* 2. 用偽元素實(shí)現(xiàn) */
.checkmark {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
}
.checkmark::before,
.checkmark::after {
content: '';
position: absolute;
background-color: black;
}
.checkmark::before {
width: 2px;
height: 8px;
left: 6px;
top: 2px;
transform: rotate(45deg);
}
.checkmark::after {
width: 2px;
height: 14px;
left: 2px;
top: -2px;
transform: rotate(135deg);
}

以上兩種方法都可以實(shí)現(xiàn)打?qū)吹男Ч渲械诙N方法使用了偽元素來繪制對(duì)勾。我們可以根據(jù)實(shí)際需求來選擇具體的實(shí)現(xiàn)方式。