How to create a Chevron using Tailwind CSS ?
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:
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 > |
Output: