CSS3中有一種很有趣的效果，就是可以使一個長方形凹進去形成梯形，非常適合用來展示產品或者其他的圖片內容。下面，我們就來看一下如何使用CSS3實現這個效果。

.trapezoid {
width: 150px;
height: 0;
padding-top: 50px;
padding-bottom: 50px;
position: relative;
background-color: #22b8cf;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
.trapezoid:before,
.trapezoid:after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 25px solid transparent;
top: -50px;
}
.trapezoid:before {
right: 100%;
border-right-color: #22b8cf;
}
.trapezoid:after {
left: 100%;
border-left-color: #22b8cf;
}

　　在這段代碼中，我們為一個名為 ".trapezoid" 的 div 元素設置了一些樣式，這個元素就是我們要實現梯形效果的主要元素。首先，我們設置了該元素的寬度為150px，高度為0，這讓該元素看起來只是一個線條。接下來，我們通過 padding-top 和 padding-bottom 讓這個元素的實際高度為100px，這使得該元素形成了固定高度的長方形。我們還設置了一個背景色和一個陰影效果，讓其看起來更具有立體感。 　　接下來，我們使用 :before 和 :after 偽類來分別創建兩個長方形的三角形，這兩個三角形加上原本的長方形元素，就形成了梯形的效果。其中，我們設置了這兩個三角形的 border 為25px，顏色與長方形的背景色相同，這使得這兩個三角形看起來就像是目標元素斷掉的一部分，而不是“膠著”在它上面的別的元素。通過設置這些元素的位置和顏色，我們就可以完整地實現這個流行的CSS3效果了。