利用css實現一個簡單的對號效果

一般我們有兩個想法去實現，一個是將現成的符號插入頁面中，另一個是使用css來實現。

（學習影片分享：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 的樣式，得到對號的大體輪廓

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

運行效果

解析：

如上圖，第一個為兩條線等寬的對號效果，第二個為兩條線不等寬的對號效果；第三個為兩條線等寬等長的對號效果。

注意事項：

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

• #可以依照實際需求調整元素寬度和高度

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

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

相關推薦：

CSS教學#

以上是利用css實現一個簡單的對號效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！