實現對號效果，一種思路是利用現成的符號，直接在網上搜索到 √，插入頁面。另一種思路是本文要介紹的用 CSS 實現，思路是：

• 給塊級元素設定寬度和高度

• 設定元素相鄰的兩個 border

• 旋轉元素

HTML

<div class="check-style-unequal-width"></div>

解析

• 此處需要使用塊級元素

• 不需要設定元素內容

CSS

.check-style-unequal-width {

    width: 8px;

    height: 16px;

    border-color: #009933;

    border-style: solid;

    border-width: 0 3px 5px 0;

    transform: rotate(45deg);

}

解析

• 設定寬度和高度，得出一個矩形效果，並且矩形中沒有內容

• 設定相鄰 border 的樣式，得到對號的大體輪廓

• 使用旋轉屬性，成功得到對號

執行效果

解析

如上圖，第一個為兩條線等寬的對號效果，第二個為兩條線不等寬的對號效果；第三個為兩條線等寬等長的對號效果。詳細實現請參見 check 原始碼。

注意事項

• 行級元素直接設定寬度和高度沒有用，需要設定其 display 使其變為塊級元素。例如：span 需要設定 display 為 inline-block 才能適用於本例效果

• 可以根據實際需求調整元素寬度和高度

• 可以根據實際需求設定不同的 border，以及相鄰 border 的寬度

• 可以對此效果做簡單的修改，作用於偽元素 ::before 和 ::after。可參考 ::before & ::after