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.
<!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.
<!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:
