css3 - 如何製作此形狀？

Question

我想使用CSS3創建這樣的形狀：

（我知道圖像質量是可怕的，但你明白了吧）。 我試過一些這些css形狀發生器： http://medleyweb.com/resources/css-generator-ui-animation/ 沒有成功。有任何想法嗎？

Answer 1

這裏有一種方法：http://codepen.io/anon/pen/HKbrq

HTML：

<div class="trapezoid"> </div> 

CSS：

.trapezoid { 
    width: 400px; 
    height: 150px; 
    border-style: solid; 
    border-width: 40px; 
    border-color: transparent; 
    border-left-color: black; 
    border-left-width: 300px; 
} 

Answer 2

您是否嘗試過使用SVG？你可以繪製多邊形。 SVG是基於XML的。 或使用矩陣（）變換。