CSS斜邊矩形是一個具有斜邊的 CSS 矩形。它通常用于美化頁面元素，比如按鈕和卡片。在本文中，我們將詳細介紹如何使用 CSS 創建斜邊矩形。

// 創建一個有斜邊的 CSS 矩形
.slanted-rectangle {
width: 200px;
height: 100px;
background-color: #f2f2f2;
transform: skew(-20deg);
}

上述代碼創建一個寬度為 200 像素、高度為 100 像素的矩形，并將其 skew 轉換為 -20 度，使其具有斜邊。如果需要更大或更小的矩形，請根據自己的需要更改寬度和高度值。

但是，該方法會使矩形看起來傾斜并變形。如果想要避免形變，可以使用偽類來增加斜線。如下所示：

// 增加斜線而不是使用 skew 
.slanted-rectangle {
position: relative;
width: 200px;
height: 100px;
background-color: #f2f2f2;
}
.slanted-rectangle:after {
content: "";
position: absolute;
bottom: -20px;
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 0 10px;
border-color: transparent transparent transparent #f2f2f2;
}

上述代碼使用偽類在矩形下方創建斜線。使用此方法，您可以避免形變問題，并在外觀上運用更多的定制化選項。如果需要更大或更小的斜線，請根據需要更改 border-width 和 border-color。

CSS 斜邊矩形在美化和設計網站時是很有用的工具。通過了解如何創建斜邊矩形，您可以為您的頁面增添一些獨特的個性化元素，并使其更好看、更好用。