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

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.

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 mx-auto mt-24">         <p class="font-bold underline text-gray-600">             Chevron using Position in TailwindCSS         </p>          <div class="flex space-x-24 mt-10">             <div class="relative w-16 h-16">                 <div class="absolute bg-pink-600                              w-14 h-14 rotate-45">                 </div>                 <div class="absolute bg-white w-14                              h-14 rotate-45 -translate-x-1">                 </div>             </div>              <div class="relative w-16 h-16">                 <div class="absolute bg-green-600                              w-14 h-14 rotate-45">                 </div>                 <div class="absolute bg-white w-14                              h-14 rotate-45 translate-x-1">                 </div>             </div>              <div class="relative w-16 h-16">                 <div class="absolute bg-yellow-600                              w-14 h-14 rotate-45">                 </div>                 <div class="absolute bg-white w-14                              h-14 rotate-45 -translate-y-1">                 </div>             </div>              <div class="relative w-16 h-16">                 <div class="absolute bg-blue-600                              w-14 h-14 rotate-45">                 </div>                 <div class="absolute bg-white w-14                              h-14 rotate-45 translate-y-1">                 </div>             </div>         </div>     </div> </body>  </html>