CSS是一種用來設(shè)計(jì)網(wǎng)頁外觀的語言，它可以控制網(wǎng)頁中各種元素的排版、顏色、字體大小等樣式。在CSS中，我們還可以通過一些技巧來改變元素的形狀，比如將一個(gè)矩形改變成平行四邊形。下面介紹一下如何使用CSS來改變矩形的形狀。

.parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background-color: #aaa;
}

要將矩形改變成平行四邊形，我們可以使用CSS3的transform屬性中的skew函數(shù)，它可以將元素按照指定的角度傾斜。這里我們將元素傾斜20度，實(shí)現(xiàn)了一個(gè)較明顯的變形效果。同時(shí)，我們也需要設(shè)置元素的寬度、高度和背景顏色。

如果想要平行四邊形兩側(cè)顯示直角，則需要同時(shí)對元素的兩個(gè)偽元素進(jìn)行傾斜，并減少偽元素的寬度，使其剛好覆蓋元素一側(cè)。

.parallelogram::before,
.parallelogram::after {
content: "";
position: absolute;
bottom: 0;
width: 50%;
height: 100%;
background-color: #aaa;
z-index: -1;
}
.parallelogram::before {
left: -10px;
transform: skew(-20deg);
}
.parallelogram::after {
right: -10px;
transform: skew(20deg);
}

通過偽元素的用法，我們可以在一個(gè)元素上添加多個(gè)樣式，這里我們用到了兩個(gè)偽元素before和after。這兩個(gè)偽元素設(shè)置了與元素同樣的高度和背景顏色，再通過transform屬性傾斜變形并移動到元素兩側(cè)進(jìn)行覆蓋操作。

這樣，我們就成功地將矩形改變成了一個(gè)平行四邊形，并且通過偽元素的使用實(shí)現(xiàn)了兩側(cè)直角的效果。