How to create a Chevron using Tailwind CSS ?

How to draw a checkmark / tick using CSS ?

Last Updated : 29 Dec, 2023

To create a checkmark or tick, you can use the border properties and the appropriate rotation angle. The border properties are used to give an outer boundary to the elements, but before using this property, you need to specify the appropriate width and height values.

To draw something through a code, it is required to set the parameter values for that shape through some styling properties like 'height', 'width', 'color', 'border', etc.

Preview

Screenshot-2023-12-22-121610

Approach

First, create an HTML file with a heading and a '<div>' element having the class "check."
Now use CSS to set the height, width, and margin of the "check" class.
Apply 'border-bottom' and 'border-right' to form the lines of the checkmark.
Use 'transform: rotate(45deg);' to rotate the lines and create the checkmark shape.
Adjust margins for proper spacing, completing the checkmark design.

Example: In this example, we will see how to design a checkbox using HTML and CSS.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .check {
            height: 50px;
            width: 18px;
            border-bottom: 10px solid green;
            border-right: 10px solid green;
            transform: rotate(45deg);
            margin: 20px;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <div class="check"></div>
</body>

</html>

Output:

Screenshot-2023-12-22-121610

How to create a Chevron using Tailwind CSS ?

R

rohan_paul

Improve

Article Tags :

Similar Reads

How to style a checkbox using CSS ?

Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo

How to Draw a Semi-Circle using HTML and CSS ?

To draw a semi-circle using HTML and CSS, Use the 'border-radius' property in combination with a square-shaped container div. Set border-radius to create a circular shape, and then use additional CSS to clip one half, forming a semi-circle. Approach:First create a HTML structure, specifying language

How to create a Menu Icon using CSS ?

The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c

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

How to Draw a Half Moon using HTML and CSS?

Various shapes can be drawn using HTML and CSS and so is the shape of a Half Moon, This shape can be drawn by manipulating a div element using some CSS Properties. HTML Code: In this section we have a basic div tag. html <!DOCTYPE html> <html lang="en"> <head> <meta ch

How to Draw a Trapezium using HTML and CSS ?

A Trapezium is a Quadrilateral which has two parallel and two non-parallel sides. In this article we will create a Trapezium shape using simple HTML and CSS. HTML Code: In this section, we will create a simple element using the HTML div tag. HTML <!DOCTYPE html> <html lang="en"> <head

How to Create a Gradient Shadow using CSS ?

A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e

How to Create Notes using CSS?

In web design, a "note" is a styled container that stands out from the surrounding text and is frequently used to highlight particular information. We can make visually appealing notes that improve user experience with CSS.ApproachThe HTML structure includes 'div' elements to create notes. The CSS d

How To Create a Skill Bar using CSS?

A skill bar is a type of progress bar that visually represents your proficiency in various skills, making it easier for recruiters or customers to understand your expertise. We will learn how to create a skill bar using CSS.ApproachThe HTML structure includes a container div with multiple div elemen

How to Add Stroke using CSS ?

Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges.Several methods can be used to add strokes usin