CSS是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分，它可以讓我們實(shí)現(xiàn)各種各樣的效果。在本篇文章中，我們將會學(xué)習(xí)如何用CSS畫一個簡單的叉號。

.cross {
position: relative;
height: 20px;
width: 20px;
}
.cross::before, .cross::after {
position: absolute;
content: "";
height: 10px;
width: 2px;
background-color: black;
}
.cross::before {
transform: rotate(45deg);
}
.cross::after {
transform: rotate(-45deg);
}

首先，我們需要創(chuàng)建一個容器，用來裝載我們的叉號。這里我們創(chuàng)建一個叫做“cross”的class。由于叉號是一個矩形和兩條斜線組成的，因此我們需要先給容器一個固定的大小。在這里我們設(shè)定高和寬都為20像素。

接下來，我們創(chuàng)建兩個偽元素（pseudo-element），它們分別表示叉號中的兩條斜線。由于斜線需要靠著容器的邊框，我們需要將它們的position屬性都設(shè)為“absolute”，在這里我們使用雙冒號（::）來表示偽元素。content屬性為空，意味著我們不需要偽元素顯示任何內(nèi)容。

在這里，我們使用transform屬性來將斜線旋轉(zhuǎn)指定的角度來實(shí)現(xiàn)斜線的效果。其中一個偽元素旋轉(zhuǎn)45度，另一個偽元素旋轉(zhuǎn)-45度。這樣，我們就得到了一個簡單的、使用CSS實(shí)現(xiàn)的叉號。