在CSS中,我們可以使用border
屬性來(lái)繪制一個(gè)對(duì)角線(xiàn)的叉,以下是一個(gè)示例代碼:
.diagonal-cross { width: 200px; height: 200px; position: relative; } .diagonal-cross::before, .diagonal-cross::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .diagonal-cross::before { border-top: 2px solid #000; transform: rotate(45deg); } .diagonal-cross::after { border-bottom: 2px solid #000; transform: rotate(-45deg); }
在這個(gè)示例中,我們創(chuàng)建了一個(gè)名為.diagonal-cross
的類(lèi),用于繪制對(duì)角線(xiàn)的叉,這個(gè)類(lèi)具有width
和height
屬性,用于設(shè)置叉的大小,我們使用position: relative;
來(lái)設(shè)置叉的位置相對(duì)于其包含塊,我們使用兩個(gè)偽元素(::before
和::after
)來(lái)繪制叉的上半部分和下半部分,每個(gè)偽元素都具有position: absolute;
屬性,這意味著它們的位置相對(duì)于.diagonal-cross
元素,我們使用border-top
和border-bottom
屬性來(lái)繪制叉的上半部分和下半部分,并使用transform: rotate()
屬性將它們旋轉(zhuǎn)到正確的位置。