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

```html
<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:

```css
.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:

```css
.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:

[CodePen](https://codepen.io/hilja/pen/nAczJ)

## Conclusions

I used these trapezoids to make
[beveled corner boxes](/css-beveled-corners-take-2-a-sass-mixin) 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.