How to create a Chevron using Tailwind CSS ?

Last Updated : 09 Feb, 2024

A Chevron is a basic geometric shape that is used in websites to indicate directional movements or navigation. By utilizing specific border properties and transformations, a chevron shape can be achieved without the need for custom CSS. Tailwind's utility-first approach allows for a straightforward and efficient implementation of complex geometric shapes like chevrons.

Table of Content

Chevron using borders
Chevron using position

Chevron using borders

This approach involves using a border utility class to create a chevron shape. If we apply a border to a square in any two consecutive directions and rotate the element at 45 degrees. It will form a chevron.

Syntax

<div class="w-[width]  h-[height] border-t-[thickness] 
                     border-r-[thickness] transform rotate-45">
</div>

Example: Implementation to create a chevron using border of tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Tailwind CSS Chevron</title>
</head>

<body>
    <div class="max-w-xl mt-24 mx-auto">
        <p class="font-bold underline text-gray-600">
            Chevron using Borders in TailwindCSS
        </p>
        <div class="flex space-x-24 mt-10">
            <div class="w-16 border-pink-600 h-16 
                        border-t-2 border-r-2 
                        transform rotate-45 border-gray-800">
            </div>
            <div class="w-16 border-green-600 h-16 
                        border-l-2 border-b-2 transform 
                        rotate-45 border-gray-800">
            </div>
            <div class="w-16 h-16 border-yellow-600 
                        border-r-2 border-b-2 transform 
                        rotate-45 border-gray-800">
            </div>
            <div class="w-16 h-16 border-sky-600 
                        border-t-2 border-l-2 transform 
                        rotate-45 border-gray-800">
            </div>
        </div>
    </div>
</body>

</html>

Output:

cv1 — chevron using borders in tailwindcss

Chevron using position

In this approach, we overlap two sqaure, rotate both of them to 45 degree and then shift the upper div a few pixels to right, left, up or down to create respective chevron. The translate-x and translate-y utilities are used to shift the positioning of the upper sqaure.

Note: The backgroud color of the overlapping div should be same as the background color of parent div.

Syntax

<div class="relative bg-{parent} w-[width] h-[height] ">
    <div class="absolute bg-[color1] w-[child-width] 
                h-[child-height] rotate-45">
    </div>
    <div class="absolute bg-{parent} w-[child-width] 
                h-[child-height] rotate-45 -translate-x-[shift-x] -translate-y-[shift-y]">
    </div>
</div>

Example: Implemetation of chevron using position.