There are many different ways to create the trapezoid shape and each have their own benefits and downfalls.
Below is a comprehensive list of the various ways and all should be responsive.
CSS Border
The most well supported of all the answers. It is supportwed way back to IE and across all other browsers both on the desktop and mobile.
#trapezoid {
border-left: 20vw solid red;
border-top: 5vw solid transparent;
border-bottom: 5vw solid transparent;
width: 0;
height: 10vw;
}<div id="trapezoid"></div>CSS Perspective
A fairly new approach within CSS is the perspective method within CSS Transforms. It is now reasonably well supported across all modern browsers but can be quite difficult to get the exact shape size you want.
#trapezoid {
margin-top: 3vw;
width: 20vw;
height: 10vw;
background-color: red;
transform: perspective(20vw) rotateY(45deg);
}<div id="trapezoid"></div>CSS Clip-Path
Clip-paths create an SVG style clip and uses that to create the shape you want. It is the most simplistic way (atleast in my opinion) to create any and all shapes with just pure CSS but isn’t very well supported, even in modern browsers.
#trapezoid {
width: 20vw;
height: 20vw;
-webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
background: red;
}<div id="trapezoid"></div>CSS Skew with Pseudo Elements
This answer was given to me by web-tiki
It is similar to the perspective answer in that it uses transforms but also uses pseudo elements which have the skew on instead.
#trapezoid {
position: relative;
background: red;
width: 20vw;
height: 12vw;
margin: 8vw 0;
}
#trapezoid:before,
#trapezoid:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: inherit;
transform-origin: 100% 0;
transform: skewY(-20deg);
}
#trapezoid:before {
transform: skewY(20deg);
}<div id="trapezoid"></div>SVG
SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.
It is well supported across all browsers as viewable here: CanIUse
<svg id="trapezoid" viewbox="0 0 100 100" preserveAspectRatio="none" width="20%">
<path d="M0,0
L100,20
L100,80
L0,100z" fill="red"></path>
</svg>Canvas
Canvas is similar to SVG but uses a raster (pixel based) instead of a vector to create the shape.
The browser support for Canvas is quite good.
var shape = document.getElementById('trapezoid').getContext('2d');
shape.fillStyle="red";
shape.beginPath();
shape.moveTo(0, 0);
shape.lineTo(100, 20);
shape.lineTo(100, 80);
shape.lineTo(0, 100);
shape.closePath();
shape.fill();<canvas id="trapezoid"></canvas>