Quick Tip: CSS Triangles

Making a triangle in CSS is quite a common UI task. If you want to build a tooltip or any dropdown menu, it is possible you need one.

There are cases when you want to connect two elements visually — one solution for this problem to point one of the components to the other; this is where the CSS triangle comes into the picture.

As you will see we can achieve the desired solution in a lot of ways – like always in CSS. In this post, I show you some stylesheet only solution.

Need a reliable web application developer? We can help you achieve your goals with Laravel and Vue.js.

CSS Triangles Using Borders

This solution is a hack which often appears in CSS. Although this is a tricky solution, it works amazingly.

In CSS if you create borders you can style them completely separately (top, right, bottom, left). The separate sides connect each other in a diagonal (45 deg) way like a real picture frame or a parquet border. Because of this behavior, we can create triangles is our styled elements haven’t any width or height. After this, we need to set transparent backgrounds to the border which are unnecessary.

See the Pen
CSS Triangles with Borders by Adam Laki (@adamlaki)
on CodePen.

The following steps needed:

1. Create a separate element or style the ::before/::after pseudo element.
2. Select the direction of your arrow. You have to color the different site border of the direction. If you want to point to the top, then you need to color the border-bottom.
3. Set your arrow width; this is a little bit tricky. In case of a top arrow our width will be the left plus right border width but our height only the bottom width.
4. Set the position. Most of the time you want an absolute position.

CSS Triangles Using Clip-path

The CSS’s clip-path is a newer, partially supported feature. Using it, we can mask elements in any primitive form. It is like when you draw SVG shapes in your graphics program.

It is a complex section of specification so if you are interested in more please visit MDN.

See the Pen
CSS Triangles with Clip-path by Adam Laki (@adamlaki)
on CodePen.

About our example: drawing a triangle we need the polygon() function where we have to set up to point relative to the edges of our container after we set the width, height, and background color.

Using polygon() we can declare any point if we want. For more info and shape you can visit this cool editor/playground.

The biggest drawback of this solution is browser support. If you want to use it, you need to set up a fallback. Otherwise, this is the best and non-hacky answer to this problem.

Because it is a mask, we can come up with any creative solution like gradient background.

CSS Triangles with Rotate Transform

Using transformation, we can rotate one element with 45 deg than hide its overflown parts. It seems like this solution is overkill and it is based on the previous ones, but there can be cases where you choose this.

See the Pen
CSS Triangles with Rotation Transform by Adam Laki (@adamlaki)
on CodePen.

In the examples, we created a square element and a sub-element on the ::before. The sub-element has the width and height of the original divided by 1.41 (because we have to set the smaller hypotenuse to the width of the bigger one). Note you also have to set the position and the transform origin based on the direction.

CSS Triangles with HTML Entities

Using an HTML entity is the most basic solution, but it could work in more straightforward cases. I’m always surprised at how many places I see entities in practice.

To use them add one of them to the ::before or the ::after pseudo-element’s content property.

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲