Create triangles with TailwindCSS

An old tried and tested solution is to use borders properly. The base of this solution is how border rendering works. Where two borders meet and form an angle. To illustrate this, let's take a div element with a width and height of 0px , a border-width of 20px , and a different color on each side for better visibility.

<div class="w-0 h-0 border-[20px] border-t-red-500 border-b-amber-500 border-r-green-500 border-l-sky-500"></div>

You can now see the four triangles.

All we have to do is keep the border color for the ones we need and set the other border's color transparent. 

<div class="flex w-96 justify-evenly m-8">
    <div class="w-0 h-0 border-[20px] border-transparent border-t-red-500 border-b-0"></div>
    <div class="w-0 h-0 border-[20px] border-transparent border-b-amber-500 border-t-0"></div>
    <div class="w-0 h-0 border-[20px] border-transparent border-r-green-500 border-l-0"></div>
    <div class="w-0 h-0 border-[20px] border-transparent border-l-sky-500 border-r-0"></div>
</div>

This technique makes it easy to create a right-angled triangle. If you want a regular acute or obtuse triangle, we can create them easily. All you need to do is adjust the thickness of the appropriate border to be thicker or smaller than the other frames.

<div class="flex w-96 justify-evenly items-center m-8">
    <div class="w-0 h-0 border-[20px] border-x-[40px] border-transparent border-t-red-500 border-b-0"></div>
    <div class="w-0 h-0 border-[20px] border-x-[10px] border-transparent border-b-amber-500 border-t-0"></div>
    <div class="w-0 h-0 border-[10px] border-y-[20px] border-transparent border-r-green-500 border-l-0"></div>
    <div class="w-0 h-0 border-[100px] border-y-[20px] border-transparent border-l-sky-500 border-r-0"></div>
</div>

The above code results in the following triangles:

Another common method is to nest two div elements. The inner div is given a background color and rotated in the desired direction using rotate .

<div class="h-8 w-8 bg-sky-500 rotate-45 transform origin-bottom-left"></div>

As a result, we get a diamond shape. 

The role of the outer div element is to cut off the unnecessary part of the shape using the overflow-hidden class.

<div class="w-12 h-8 overflow-hidden inline-block">
    <div class="h-8 w-8 bg-sky-500 rotate-45 transform origin-bottom-left"></div>
</div>

The result is again a triangle.

The advantage of this solution is that you can use a separate background color and border color, but unfortunately, you can only create a right-angled triangle.

<div class="flex w-96 justify-evenly items-center p-4">
    <div class="w-12 h-8 overflow-hidden inline-block">
        <div class="h-8 w-8 bg-amber-500 rotate-45 transform origin-bottom-left"></div>
    </div>

    <div class="w-12 h-8 overflow-hidden inline-block">
        <div class="h-8 w-8 bg-red-100 border border-red-500 -rotate-45 transform origin-top-left"></div>
    </div>

    <div class="w-8 overflow-hidden inline-block">
        <div class="h-12 bg-green-500 -rotate-45 transform origin-top-right"></div>
    </div>

    <div class="w-8 overflow-hidden inline-block border-l border-sky-500">
        <div class="h-8 w-8 bg-sky-100 border border-sky-500 rounded-lg rotate-45 -translate-x-[22px]"></div>
    </div>
</div>

Triangle variation example output:

This approach is a modified version of the nested elements. In this case, the nested dive is a clip-path , which we can use to create symmetric shapes. For example, you can create both acute and obtuse triangles.

<div class="flex w-96 justify-evenly items-center p-4">
    <div class="w-8 h-8 overflow-hidden flex justify-center">
        <div class="w-6 h-16 bg-amber-500 [clip-path:polygon(50%_0%,_100%_50%,_50%_100%,_0%_50%)]"></div>
    </div>
    <div class="w-8 h-8 overflow-hidden flex justify-center rotate-180">
        <div class="w-6 h-16 bg-red-500 [clip-path:polygon(50%_0%,_100%_50%,_50%_100%,_0%_50%)]"></div>
    </div>
    <div class="w-8 h-8 overflow-hidden -rotate-90 flex justify-center">
        <div class="w-6 h-16 bg-green-500 [clip-path:polygon(50%_0%,_100%_50%,_50%_100%,_0%_50%)]"></div>
    </div>
    <div class="w-8 h-8 overflow-hidden rotate-90 flex justify-center">
        <div class="w-6 h-16 bg-sky-500 [clip-path:polygon(50%_0%,_100%_50%,_50%_100%,_0%_50%)]"></div>
    </div>
</div>

The disadvantage is that you can no longer use the border property because the border is not added to the polygon you created, but to the regular div element. Also, currently, TailwindCSS doesn't have a dedicated utility class, so we have to use arbitrary values.

In some cases, one of the easiest solutions is to use special characters (emojis). Simply copy and paste the required emoji character as text and you are done. You can control the size by setting the font size. The advantage is that you can choose from many emoji designs. However, the disadvantage is that not all emojis appear the same in each browser.

<div class="flex w-64 justify-evenly items-center p-4">
    <div class="text-5xl text-amber-500"></div>
    <div class="text-5xl text-red-500"></div>
    <div class="text-5xl text-green-500"></div>
    <div class="text-5xl text-sky-500"></div>
</div>

TailwindCSS border reference

TailwindCSS rotate reference

MDN clip-path reference