Comment obtenir un effet de coche avec CSS-tutoriel CSS-php.cn

Comment obtenir un effet de coche avec CSS

WBOY

Libérer： 2021-12-14 14:32:19

original

3585 Les gens l'ont consulté

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.

Comment obtenir un effet de coche avec CSS

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>

Copier après la connexion

Résultat de sortie :

Comment obtenir un effet de coche avec CSS