CSS trapezoid shapes drawn in pure CSS (and triangles)

Here are some trapezoid shapes drawn in pure CSS.

They’re very similar to CSS triangles, they’re basically elongated triangles... with more corners.

CSS triangles

Here’s a reminder of CSS triangles. They work by combining border widths with the element dimensions in a particular way.

Shape	Name
	Arrow up
	Arrow down
	Arrow left
	Arrow right
	Arrow up right
	Arrow down right
	Arrow down left
	Arrow up left

This is the HTML for those triangles:

<div class="arrow arrow-up"></div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>
<div class="arrow arrow-up-right"></div>
<div class="arrow arrow-down-right"></div>
<div class="arrow arrow-down-left"></div>
<div class="arrow arrow-up-left"></div>

And the triangle styles:

.arrow {
  display: inline-block;
  height: 0;
  margin-right: 10px;
  width: 0;
}
 
.arrow-up {
  border-bottom: 15px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
 
.arrow-down {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid black;
}
 
.arrow-right {
  border-bottom: 10px solid transparent;
  border-left: 15px solid black;
  border-top: 10px solid transparent;
}
 
.arrow-left {
  border-bottom: 10px solid transparent;
  border-right: 15px solid black;
  border-top: 10px solid transparent;
}
 
.arrow-top-right {
  border-bottom: 15px solid transparent;
  border-right: 15px solid black;
  border-top: 0 solid transparent;
}
 
.arrow-down-right {
  border-bottom: 0 solid transparent;
  border-right: 15px solid black;
  border-top: 15px solid transparent;
}
 
.arrow-down-left {
  border-bottom: 0 solid transparent;
  border-left: 15px solid black;
  border-top: 15px solid transparent;
}
 
.arrow-up-left {
  border-bottom: 15px solid transparent;
  border-left: 15px solid black;
  border-top: 0 solid transparent;
}

CSS trapezoids

To get the triangles to look like trapezoids, set the width to 100% (or other suitable value), and play with the border widths. This is something that could be extracted to some sort of trapezoid helper function pretty easily.

And here’s the trapezoid styles:

.trapezoid {
  height: 0;
  margin-bottom: 20px;
  width: 100%;
}
 
.trapezoid-up {
  border-bottom: 25px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
 
.trapezoid-down {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 25px solid black;
}
 
.trapezoid-right {
  border-bottom: 25px solid black;
  border-left: 20px solid transparent;
  border-right: 0 solid transparent;
  border-top: 0 solid transparent;
}
 
.trapezoid-left {
  border-bottom: 25px solid black;
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 0 solid transparent;
}

CSS trapezoid demo

Also see this demo written in Sass. It has more trapezoid versions and slightly different formatting from the examples above:

Conclusions

I used these trapezoids to make beveled corner boxes before gradients were supported in all browsers. But nowadays, I’m unsure where to use these, I’ll leave that to you :)

Hope this was helpful.