CSS是前端開發中不可或缺的技術，除了為頁面添加樣式外，還可以使用它來畫出各種形狀。今天我們就來學習如何使用CSS畫一個帶圖片的直角梯形。

.trapezoid {
position: relative; /*設置相對定位*/
width: 400px;
height: 0;
border-bottom: 100px solid #333; /*設置下邊框*/
border-right: 50px solid transparent; /*設置右邊框*/
border-left: 50px solid transparent; /*設置左邊框*/
}
.trapezoid img {
position: absolute;
width: 100%;
height: 100%;
top: 0; /*設置圖片位置為最上方*/
left: 0; /*設置圖片位置為最左方*/
}

我們給.trapezoid設置一個相對定位，然后設置它的高度為0，只設置下邊框和左右邊框的斜度，通過這兩條斜邊的長度和寬度就可以得到梯形的上下邊長度。最后我們使用絕對定位來放置圖片，使圖片覆蓋在梯形之上。

這樣我們就成功用CSS畫出一個帶圖片的直角梯形啦！