clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

CSS trapezoid shapes drawn in pure CSS (and triangles)

Filed under: HTML/CSS— Tagged with: sass, beveled

Here’s some trapezoids 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 the CSS triangles, they work by abusing the border width values combined in a right way with the element dimensions.

ShapeName
Arrow up
Arrow down
Arrow left
Arrow right
Arrow up right
Arrow down right
Arrow down left
Arrow up left

As an reminder, 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 here are 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 them 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 a bit different formatting as the above examples:

See a Demo nAczJ

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.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!