CSS中的梯形效果可以通過偽元素的transform屬性實現。在這個案例中，我們使用偽元素:before和:after為梯形效果添加了兩個三角形。

.container {
position: relative;
height: 100px;
width: 200px;
background-color: #009abf;
}
.container:before, .container:after {
content: "";
position: absolute;
top: 0; 
width: 0; 
height: 0; 
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.container:before {
border-right: 50px solid #009abf;
left: -50px;
}
.container:after {
border-right: 50px solid #009abf;
right: -50px;
transform: rotate(180deg);
}

這個梯形效果的關鍵點在于：使用了CSS屬性transform:rotate(180deg)來翻轉其中一個三角形。同時，使用偽元素來添加三角形，也免去了我們使用額外標簽的煩惱。

通過這個案例，我們可以看到，在CSS中使用偽元素來實現一些效果是非常便利的。同時，這個梯形布局也提供了一種實現不同形狀的方案。