CSS圓圈內對勾,是指在一個圓圈內展示一個對勾的效果。通常用于標記任務已完成或者達成目標的情況。接下來,我們就來看看如何實現這個效果。
.circle { width: 25px; height: 25px; border-radius: 50%; border: 2px solid #000; display: flex; justify-content: center; align-items: center; } .circle::before { content: ''; width: 10px; height: 5px; border-width: 0 2px 2px 0; border-style: solid; border-color: #000; transform: rotate(45deg); }
首先,我們需要創建一個圓圈的樣式。使用border-radius屬性,將矩形轉換為圓形。然后添加一個2px的黑色邊框,使得圓圈更加有立體感。其中 display: flex; 和 justify-content: center; align-items: center; 是為了讓圓圈內容居中顯示。
接下來,使用偽元素::before來添加一個對勾的樣式。通過設置width、height、border-width等屬性,創建一個傾斜的正方形。然后通過transform: rotate(45deg); 將其旋轉45度,形成對勾的樣式。最后調整border-color屬性,使對勾的顏色與圓圈的顏色保持一致。
這樣,我們就實現了一個簡單的圓圈內對勾的樣式。可以根據需要調整圓圈大小和對勾大小,使其符合自己的設計需求。
下一篇css圓形頭像框