Utilisez CSS pour obtenir un simple effet de coche

Généralement, nous avons deux idées pour l'implémenter, l'une consiste à insérer des symboles prêts à l'emploi dans la page et l'autre est d'utiliser du CSS pour l'implémenter.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Cet article présente principalement la deuxième idée :

• Donner le niveau de bloc Définir la largeur et la hauteur de l'élément

• Définir les deux bordures adjacentes de l'élément

• Faire pivoter l'élément

HTML

<div class="check-style-unequal-width"></div>

Analyse :

• Vous devez utiliser des éléments de niveau bloc ici

• Pas besoin pour définir le contenu de l'élément

CSS

.check-style-unequal-width {
 
    width: 8px;
 
    height: 16px;
 
    border-color: #009933;
 
    border-style: solid;
 
    border-width: 0 3px 5px 0;
 
    transform: rotate(45deg);
 
}

Analyse :

• Définissez la largeur et la hauteur pour obtenir un effet rectangulaire, et il n'y a pas de contenu dans le rectangle

• Définissez le style de la bordure adjacente et obtenez le contour général de la coche

• Utilisez la rotation attribut pour réussir à obtenir la coche

Effet opérationnel

Analyse :

Comme le montre l'image ci-dessus , le premier est un effet de coche avec deux lignes de largeur égale, et le second est l'effet de coche de deux lignes de largeur inégale ; le troisième est l'effet de coche de deux lignes de largeur et de longueur égales ;

Remarque :

• Il est inutile de définir directement la largeur et la hauteur des éléments au niveau de la ligne. Vous devez définir son affichage pour en faire un élément au niveau du bloc. . Par exemple : span doit définir l'affichage sur inline-block pour être applicable à cet exemple

• Vous pouvez ajuster la largeur et la hauteur de l'élément en fonction des besoins réels

• Oui Définissez différentes bordures en fonction des besoins réels et de la largeur des bordures adjacentes

• Vous pouvez apporter des modifications simples à cet effet, qui fonctionne sur les pseudo-éléments ::avant et ::après. Vous pouvez vous référer à ::before & ::after

Recommandations associées : Tutoriel 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!