在CSS中,可以通過調整div的樣式來繪制出各種圖形。在本文中,我們來講解如何使用CSS畫一個對號。
.checkmark { width: 50px; height: 100px; border: 2px solid #000; position: relative; } .checkmark:after { content: ""; position: absolute; top: 28px; left: 10px; width: 25px; height: 5px; background-color: #000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .checkmark:before { content: ""; position: absolute; top: 30px; left: 22px; width: 25px; height: 5px; background-color: #000; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
以上就是CSS繪制對號的代碼了。首先,我們定義一個寬為50px,高為100px,邊框為2px的div,然后通過:before和:after偽元素來繪制對號的兩個部分。
:before和:after偽元素可以在對應元素的前面或后面添加內容,并通過position屬性來控制它們的位置。在這里,我們分別使用:before和:after來繪制對號的兩個部分。
需要注意的是,我們在定義:before和:after的樣式時,采用了rotate屬性來將已知的矩形旋轉45度和-45度,從而形成了對號的形狀。
通過以上代碼,我們可以在頁面上成功繪制出一個對號。
上一篇css重復壓縮
下一篇div css樣式源碼