Maison > Article > interface Web > Comment obtenir un effet de coche avec CSS
Comment obtenir un effet de coche avec CSS
- WBOYoriginal
- 2021-12-14 14:32:193607parcourir
Méthode d'implémentation : 1. Utilisez l'instruction "border-color: color; border-style: solid; border-width: 0 Thickness 0" pour définir deux bordures adjacentes de l'élément rectangulaire. 2. Utilisez "transform:rotate(angle; )" pour faire pivoter le rectangle.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir l'effet de coche en CSS
En CSS, si vous souhaitez obtenir l'effet de coche, vous pouvez utiliser les attributs border-color, border-style et border-width pour définir un div élément avec seulement deux bordures adjacentes.
Utilisez l'attribut transform et la fonction rotate() pour faire pivoter l'élément div afin d'obtenir l'effet de coche.
L'exemple est le suivant :
<!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>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!