在網頁設計中,經常需要使用對勾來表示一個選項已經被選擇或者一個任務已經完成。下面介紹一種用CSS實現對勾的方法:
.checkmark { width: 25px; height: 25px; border: 2px solid #aaa; border-radius: 50%; position: relative; margin: 0 auto; } .checkmark:after { content: ""; width: 10px; height: 20px; border: 5px solid #fff; border-top: none; border-right: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
首先,我們創建一個div元素,并給它添加一個class名為"checkmark"。然后我們設置它的寬度、高度和邊框,使其看起來像一個圓形復選框。
接下來,我們給這個div元素添加一個:after偽元素。這個偽元素的content屬性必須設置為空字符,否則它將不起作用。我們設置這個偽元素的寬度、高度、邊界,以及它在div元素中的位置。
接著,我們使用transform屬性將這個元素旋轉四十五度,使其看起來像一個對勾。我們還使用translate屬性將它從它的中心點移動到div元素的中心點。
最終的效果是一個漂亮的對勾,可以將它添加到任何一個網頁中需要的地方。
上一篇css輪播圖下面的點
下一篇css輪播圖怎么代碼