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

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

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

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

.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);
}

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

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