Responsive CSS Trapezoid Shape

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.

  • border - CSS | MDN

#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.

  • perspective - CSS | MDN

#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.

  • clip-path - CSS | MDN
  • CanIUse Support
  • clip-path Generator

#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.

  • skew - CSS | MDN

#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 | MDN

<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>

I'm going to add the missing methods of the above answer:

Multiple background & linear-gradient

#trapezoid {
  width: 200px;
  height: 100px;
  background:
    /* Center area (rectangle)*/
    linear-gradient(red,red) center /100% calc(100% - 40px),
    /* triangle shape at the top*/
    linear-gradient(to bottom left, transparent 49%,red 51%) top    / 100% 20px,
    /* triangle shape at the bottom*/
    linear-gradient(to top    left, transparent 49%,red 51%) bottom / 100% 20px;
    
  background-repeat:no-repeat;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    width: 200px;
    height: 100px;
  }
  to {
    width: 120px;
    height: 180px;
  }
}
<div id="trapezoid"></div>

The same idea can be used with mask to have any kind of background:

#trapezoid {
  width: 200px;
  height: 100px;
  -webkit-mask:
    /* Center area (rectangle)*/
    linear-gradient(red,red) center /100% calc(100% - 40px),
    /* triangle shape at the top*/
    linear-gradient(to bottom left, transparent 49%,red 51%) top    / 100% 20px,
    /* triangle shape at the bottom*/
    linear-gradient(to top    left, transparent 49%,red 51%) bottom / 100% 20px;    
  -webkit-mask-repeat:no-repeat;
  background:url(https://picsum.photos/id/1064/400/300) center/cover;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    width: 200px;
    height: 100px;
  }
  to {
    width: 120px;
    height: 180px;
  }
}
<div id="trapezoid"></div>

Tags:

Html

Css

Svg

Css Shapes

Recent Posts