CSS中的右上角打勾,是許多網站和應用程序中經常使用的一種UI設計元素。它可以用于表示完成了某項任務或操作,或者用于標記文本中的項目。這種打勾效果可以通過CSS的偽元素和背景圖像屬性來實現。
.checkmark { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0e8ce4; } .checkmark:after { content: ""; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
這段CSS代碼首先創建了一個圓形的
元素,并設置了它的寬度、高度和邊框樣式。之后,使用偽元素:after來添加打勾的形狀。這個:before偽元素創建一個空的內容區域,并設置絕對定位、邊界和角度變換,以形成一個像打勾的形狀。使用:before偽元素而不是背景圖像屬性是為了能更精確地控制打勾的位置和樣式。