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>