Home > Article > Web Front-end > How to achieve check mark effect with css
How to achieve check mark effect with css
- WBOYOriginal
- 2021-12-14 14:32:193621browse
Implementation method: 1. Use the "border-color: color; border-style: solid; border-width: 0 thickness 0" statement to set the two adjacent borders of the rectangular element; 2. Use "transform :rotate(angle)" statement can rotate the rectangle.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve the check mark effect in css
In css, if you want to achieve the check mark effect, you can use border-color and border-style and the border-width attribute sets a div element with only two adjacent borders.
Use the transform attribute and rotate() function to rotate the div element to achieve the check mark effect.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 8px;
height: 16px;
border-color: #009933;
border-style: solid;
border-width: 0 3px 5px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve check mark effect with css. For more information, please follow other related articles on the PHP Chinese website!