DEV Community

Cover image for CSS Shapes - Triangles
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Shapes - Triangles

Yesterday we had our first introduction in CSS Shapes and started with the basic shapes.

Today I want to check out a very useful and a bit of an odd shape.
The triangle has many ways of building, but most people use the border hack to create them.

Creating triangles in CSS

Let's create a basic down carrot.

<div class="triangle-down"></div>
Enter fullscreen mode Exit fullscreen mode

For the demo purpose, I added some colors to see what actually makes it appear like a triangle.

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid red;
  border-right: 50px solid purple;
  border-top: 100px solid blue;
}
Enter fullscreen mode Exit fullscreen mode

The actual magic part is the border-top. We'll see that's what we'll see, but we are offsetting the left and right by half of it.
In the example, I added a red and purple color.

This will result in the following:

CSS Triangle

As you can see, the result is looking like a triangle.
To make this perfect, we need to set the sides to transparent.

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid blue;
}
Enter fullscreen mode Exit fullscreen mode

CSS Down triangle

Let's say we want the arrow to point up and not down.
We can simply switch the border-top to be border-bottom.

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}
Enter fullscreen mode Exit fullscreen mode

CSS Arrow up

The same can be applied to make left and right arrows:

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid blue;
  border-bottom: 50px solid transparent;
}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid blue;
  border-bottom: 50px solid transparent;
}
Enter fullscreen mode Exit fullscreen mode

This is basically the same concept, but we switch around by defining the top and bottom and using the left and right as offsets with a color.

Left and right arrow in CSS

You can even offset triangles to point to a specific corner.
For instance point to left bottom:

.triangle-left-bottom {
  width: 0;
  height: 0;
  border-bottom: 100px solid blue;
  border-right: 100px solid transparent;
}
Enter fullscreen mode Exit fullscreen mode

Left bottom triangle in CSS

Can you figure out how to create the other corners?

You can always have a play with this Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (7)

Collapse
 
ninofiliu profile image
Nino Filiu

Nice and clean! For some use cases like icons it might be useful to also know about some special chars

⊳ &vrtri;
⊲ &vltri;
β–³ &xutri;
β–΄ &utrif;

more here

Collapse
 
dailydevtips1 profile image
Chris Bongers

Very good point! In same cases these might actually work better

Collapse
 
vanaf1979 profile image
Stephan Nijman

Nice one! You could also use clip-path instead:
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

See this little Codepen: codepen.io/Since1979/pen/dyNozXj

Collapse
 
dailydevtips1 profile image
Chris Bongers

Ah yes, not really good with the clip-path syntax yet, how does it perform browser wise?

Collapse
 
vanaf1979 profile image
Stephan Nijman

Well it should work on all mayor modern browsers. And i dont think performance should be an issue. Browsers can handle more then we think! :p

Collapse
 
kalashin1 profile image
Kinanee Samson

You should be using clip path property, it's more shorter and easier to understand

Collapse
 
dailydevtips1 profile image
Chris Bongers

I don't agree on that, It's an opinion...
For me the border option is actually easier to understand.

However, the clip-path is a good option yes