How to Draw a Checkmark/Tick Using CSS

A checkmark or a tick symbol can be drawn in HTML in different shapes and colors using different CSS properties. 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.

This article will demonstrate the following approaches:

• Method 1: Drawing a Checkmark/Tick Symbol Using CSS Properties
• Method 2: Inserting a Checkmark/Tick Using Unicode Characters

Method 1: Drawing a Checkmark/Tick Symbol Using CSS Properties

To draw a tick symbol, the first requirement is to visualize how the tick mark will look at the end because it can be created in any color size or shape. It will be better to understand this with the help of an example.

Example
For example, the developer wants to draw a green-colored simple tick mark using CSS style properties and display it at the center of the interface. In the HTML code, it is required to create a “<div>” container element with an “id” or a “class”:

In the above HTML statement, a “div” element has been added with the id declared as “checkmark”.

While styling the element using the CSS properties, add an “id” selector to refer to the HTML element and then specify properties inside it:

The above CSS style element has the following properties:

• The “transform: rotate(45deg)” rotates the straight vertical and horizontal lines in such a way that makes the shape of a tick symbol.
• The “height” property sets the height of the tick symbol to “45px”.
• The “width” property makes the symbol “20px” wide.
• The “margin-left” property aligns the tick symbol to the center of the web page interface.
• After that, the “border-bottom” and “border-right” properties set the border weight of both the lines to “9px” and define the “darkolivegreen” color for both lines that make a complete tick symbol.

This will create a green-colored simple check mark or tick symbol displayed at the center of the web page interface “45px” high and “20px” wide:

Method 2: Inserting a Checkmark/Tick Using Unicode Characters

There are also some Unicode characters that automatically insert the tick mark symbols in the output without needing to style and define parameter values for them. For instance, the Unicode character “U+2713” helps add a simple tick symbol in the output. Similarly, the Unicode character “U+2713” helps insert the white heavy tick symbol in the output. To learn how to add these Unicode characters in an HTML document through a complete guide, click here.

Conclusion

A check mark or a tick symbol can be drawn by first creating an HTML element with an id or a class and then adding the id or class selector in the CSS style element to refer to that element. To create the shape of a check mark/tick on the web page interface, different CSS properties like “height”, “width”, “rotate” and “color” can be used according to the type and size of the checkmark one wants. This blog demonstrates the method for drawing a checkmark/tick using CSS.