CSS可以輕松地繪制各種形狀，包括十字形。下面是一些代碼示例。

.cross {
width: 100px;
height: 100px;
position: relative;
}
.cross:before,
.cross:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 3px;
background-color: black;
}
.cross:before {
left: 0;
transform: rotate(45deg);
}
.cross:after {
right: 0;
transform: rotate(-45deg);
}

上面的代碼將創(chuàng)建一個包含兩個旋轉(zhuǎn)矩形的基本CSS十字形。

首先，我們創(chuàng)建了一個相對定位的元素，其寬度和高度均為100像素。然后，我們使用:before和:after選擇器創(chuàng)建兩個偽元素。

這兩個元素均采用絕對定位。將上、下、左、右位置設(shè)置為0并使用margin:auto將它們放置在十字形的正中心。

:before元素的左側(cè)設(shè)置為0，并使其以45度旋轉(zhuǎn)。:after元素的右側(cè)設(shè)置為0，并將其向左旋轉(zhuǎn)45度，這樣我們就得到了一個漂亮的十字形。

這是CSS繪制十字形的一種簡單而優(yōu)雅的方法。您可以根據(jù)自己的需要進(jìn)行調(diào)整和更改，以實(shí)現(xiàn)不同的效果。