How to Create a Responsive Trapezoid Shape Using CSS, SVG, or Canvas?

Responsive Trapezoid Shapes in CSS, SVG, and Canvas

Question:

How can I create a responsive trapezoid shape using CSS, SVG, or Canvas?

Answer:

There are several methods to create trapezoids with different advantages and limitations. Here are a few responsive options:

CSS Border:

Using CSS borders is the most widely supported approach, compatible with IE and all modern browsers on desktop and mobile.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#trapezoid {
  border-left: 20vw solid red;
  border-top: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
  width: 0;
  height: 10vw;
}

Advantages:

• Excellent browser support
• Easy to implement

Disadvantages:

• Borders have some limitations, such as rounded corners