使用CSS可以輕松將一個矩形變為梯形。下面我們來看看如何實現。 首先，我們需要一個矩形的DIV元素，然后使用transform屬性進行傾斜變形，如下所示：

這個樣式將會使這個矩形傾斜成一個梯形，但是右側有一部分空白區域。為了讓它更像一個完美的梯形，我們需要將寬度進行微調。如下所示：

現在我們的梯形看上去已經比之前好多了，但是它并不具有完美的直角和直線。這時候，我們可以通過偽類:before和:after來添加兩個三角形元素，從而讓梯形的兩側變成完美直角。如下所示：

代碼解析： - 首先設置了元素的position為relative，以便偽類:before和:after的位置可以相對于它來定位。 - 偽類:before和:after都是一個空的元素，通過border屬性創造出兩個等腰直角三角形。 - 三角形的高度為50px，即等于矩形的高度，左右兩側通過向內傾斜邊緣使其貼合到梯形的兩側。 - 最后，用transform屬性讓三角形也傾斜成同一個角度，以達到完美的效果。 現在，我們就成功地將一個矩形變成了一個漂亮的梯形。如果你有更好的想法，歡迎留言分享哦！