矩形CSS對號是一種常見的網(wǎng)頁設(shè)計元素,用于顯示特定條件已滿足或完成的狀態(tài)。本文將介紹如何使用CSS創(chuàng)建一個簡單的矩形對號。
.checkmark { width: 20px; /* 矩形寬度 */ height: 20px; /* 矩形高度 */ border: 2px solid #000; /* 矩形邊框 */ position: relative; } .checkmark::before, .checkmark::after { content: ""; position: absolute; background-color: #000; /* 對號顏色 */ top: 50%; /* 對號起點 */ left: 10%; /* 對號起點 */ width: 5px; /* 對號寬度 */ height: 2px; /* 對號高度 */ transform-origin: bottom; } .checkmark::before { transform: rotate(45deg); } .checkmark::after { transform: rotate(-45deg); }
以上代碼中,我們首先設(shè)置了一個寬20像素、高20像素的矩形框架,并將其置于相對定位中。接下來,使用偽元素::before和::after來創(chuàng)建對號。我們使用絕對定位將偽元素置于如矩形的中央位置,再使用transform屬性旋轉(zhuǎn)偽元素,以形成對號效果。
使用時,只需在HTML文件中添加一個類名為checkmark的元素即可創(chuàng)建一個擁有對號的矩形框架:
以上就是如何使用CSS創(chuàng)建一個簡單的矩形對號的方法,希望對大家有所幫助。
上一篇碎狀css正常值增高
下一篇直接拼圖生成css