CSS check mark
Drawing a Tick with CSS
In web development, CSS is often used to implement simple graphics, and drawing a tick is a common requirement. In this article, we’ll discuss how to create a simple checkmark using pure CSS.
How to Create It
To create a simple checkmark in CSS, we can use CSS pseudo-elements (::before and ::after) to create two squares. We can then rotate and position the squares to create a checkmark.
Here is a simple example code that demonstrates how to draw a check mark using CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.tick {
width: 100px;
height: 100px;
position: relative;
}
.tick::before,
.tick::after {
content: "";
position: absolute;
background-color: #333;
}
.tick::before {
width: 10px;
height: 50px;
top: 30px;
left: 42px;
transform: rotate(45deg);
transform-origin: left bottom;
}
.tick::after {
width: 30px;
height: 10px;
top: 60px;
left: 30px;
transform: rotate(-45deg);
transform-origin: left bottom;
}
</style>
</head>
<body>
<div class="tick"></div>
</body>
</html>
In this code, we create a div element and give it the .tick class. We then use .tick::before and .tick::after to create squares, rotate them, and position them to form a tick mark.
If you copy and paste the above code into an HTML file and open it in a browser, you’ll see a simple tick mark appear on the page.
Analysis
Let’s analyze the above code in detail. The specific steps are as follows:
- Create a div element and add the .tick class to it. This class will be used to position and style the check mark.
-
Use .tick::before and .tick::after to create two squares that will form the final check mark.
-
Set the styles of .tick::before and .tick::after, including width, height, background color, rotation, and positioning, to achieve the checkmark effect.
It’s important to note that when rotating the square, you need to set the transform-origin property to ensure that the center of rotation is in the lower left corner of the square. This ensures the correct checkmark effect.
Conclusion
Through this article, you learned how to draw a simple checkmark pattern using pure CSS. CSS is a very powerful tool that can be used to achieve a variety of effects, including drawing graphics.