在日常的網頁設計中，常常需要使用梯形；例如導航欄，背景等。而CSS正好提供了畫梯形的方法。本文將為大家詳細介紹CSS 畫梯形的實現過程。

.trapezoid {
border-top: 100px solid #61C5F1;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
}

CSS 實現步驟如下：

• 1.首先，在 CSS 中選擇一個元素，為其添加 border-top 和 height
• 2.添加 border-left 和 border-right，將其值設為相同的百分比或像素
• 3.最后，將 border-left 和 border-right 設置為透明色

CSS 代碼解釋如下：

• border-top：設置梯形頂邊的高度，設為 100px
• border-left：設置梯形左邊的斜邊，設為 20px
• border-right：設置梯形右邊的斜邊，也設為 20px
• height：設置梯形高度，設為0，因為具體高度已經由 border-top 值確定
• width：設置梯形寬度
• border-left 和 border-right：設置其為 transparent/透明色，讓梯形兩側變為斜邊
• 觀察上方的代碼會發現，我們可以根據需求Customize設置梯形的高度、寬度和斜邊的寬度。

由此可以看出，CSS 畫梯形的實現方法相對簡單，只需要設置不同的屬性值即可。但是需要對CSS屬性有深入理解。形狀不僅僅局限于梯形，同樣的方法可以亦適用于畫其他形狀。