在 CSS 中，構(gòu)建一個(gè)勾的方法有很多種，我們可以使用偽元素、旋轉(zhuǎn) transform 和絕對定位等方式來實(shí)現(xiàn)。下面是一個(gè)使用偽元素的方法。

/* 通過 before 偽元素構(gòu)建勾 */
 .tick-icon::before {
content: '';
display: block;
width: 10px;
height: 20px;
border: 2px solid #333;
border-top: none;
border-right: none;
transform: rotate(45deg);
position: absolute;
top: 0;
left: 0;
 }
/* 通過 after 偽元素實(shí)現(xiàn)背景 */
 .tick-icon::after {
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
top: -2px;
left: -2px;
 }
/* 添加樣式和 HTML */
 .tick-icon {
width: 18px;
height: 18px;
position: relative;
margin-right: 10px;
 }已完成

在上面的代碼中，我們首先創(chuàng)建一個(gè)空的 before 偽元素，并設(shè)置它的寬度、高度、邊框等屬性，接著旋轉(zhuǎn)該元素 45 度，讓它變成一個(gè)勾的形狀。然后我們設(shè)置這個(gè)偽元素的位置在父元素的左上角，同時(shí)創(chuàng)建一個(gè) after 偽元素來實(shí)現(xiàn)背景的效果，防止勾的形狀變成了一個(gè)倒三角。

最后，我們針對父元素 tick-icon 添加一些基本樣式，例如寬度、高度、相對定位等等。在 HTML 中，我們調(diào)用這個(gè)類名，讓勾的圖案顯示在頁面上。