CSS3可以用來畫各種各樣的形狀,包括叉號。如果你需要在頁面上畫一個簡單的叉號,可以通過CSS3中的偽元素和transform屬性來實現。
首先,在HTML中創建一個div元素,它將包含你的叉號。然后,在CSS中對該div元素進行樣式定義,如下所示:
div { position: relative; width: 50px; height: 50px; } div:before, div:after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; background-color: #000; transform: translate(-50%, -50%) rotate(45deg); } div:after { transform: translate(-50%, -50%) rotate(-45deg); }這段CSS代碼首先對div元素進行樣式設置,指定了它的位置、寬度和高度。然后,創建兩個偽元素:before和:after,這兩個元素會在div元素內部創建兩個線段,用來畫叉號。這兩個偽元素的內容設置為空,然后通過絕對定位將它們位置居中。線段的寬度和高度也進行了設置,并設置了背景顏色和transform屬性,使它們旋轉45度和-45度,最終形成一個叉號。 最終,你得到的div元素上面畫出了一個簡單的叉號。通過調整線段的寬度和高度、顏色或者旋轉角度,你可以實現更多樣式的叉號。
上一篇Java平臺和net平臺
下一篇php 5.9