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: Styling— Tagged with: CSS, 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.

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