Maison  >  Article  >  interface Web  >  Comment obtenir un effet de coche avec CSS

Comment obtenir un effet de coche avec CSS

WBOY
WBOYoriginal
2021-12-14 14:32:193615parcourir

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>

Résultat de sortie :

Comment obtenir un effet de coche avec CSS

(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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn