Utilisez CSS3 pour implémenter le style étoile à cinq branches dans la page Web (analyse des principes)

Le contenu de cet article concerne l'utilisation du CSS3 pour implémenter le style étoile à cinq branches dans les pages Web. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les différents graphiques que nous voyons habituellement dans les pages Web comprennent des carrés, des rectangles, des triangles, des cercles, etc. La plupart d'entre eux sont réalisés à l'aide de CSS3 ou d'images d'arrière-plan, mais dans le processus de développement, l'arrière-plan est utilisé. Il en existe de nombreux Il existe des lacunes dans l'interception des images. Par exemple, les images nécessitent des requêtes supplémentaires et ont des exigences plus élevées en matière de pixels d'image. Par conséquent, CSS3 est devenu une méthode de mise en œuvre plus courante. Nous allons maintenant vous montrer comment utiliser des pseudo-éléments et transformer en dessinant une étoile à cinq branches.

Le principe d'utilisation du CSS3 pour implémenter le style étoile à cinq branches

Nous utilisons d'abord des éléments avec des bords de grande taille et taille de contenu nulle pour implémenter un style de triangle (pour plus de détails, veuillez faire attention à Utiliser CSS3 pour implémenter diverses collections de styles de triangle dans les pages Web), puis utilisez des pseudo-éléments : après et :avant pour cloner 2 triangles du même taille, et enfin utiliser ces 2 pseudo éléments. Différentes transformations de rotation sont appliquées aux éléments pour obtenir le style de l'étoile à cinq branches.

pseudo-élément CSS3

L'objectif principal du CSS est d'ajouter des styles aux éléments HTML. La fonctionnalité CSS qui nous permet d'ajouter des éléments supplémentaires sans perturber le document lui-même est appelée pseudo-élément. Au début, la syntaxe des pseudo-éléments était ":", mais après la révision de CSS3, "::" a été utilisé uniformément pour distinguer les pseudo-éléments et les pseudo-classes (comme :hover, :active, etc.). Cet article fera référence à deux pseudo-éléments : before et :after :before ajoutera un élément avant le contenu et :after ajoutera un élément après le contenu (on peut utiliser l'attribut content pour ajouter du contenu entre eux).

La nouvelle transformation d'attribut CSS3

L'attribut transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. Cet article utilisera la transformation pour faire pivoter les deux triangles clonés dans des directions différentes.

Étapes et code d'implémentation pour implémenter le style étoile à cinq branches en utilisant CSS3

Étape 1 : Créer un triangle

.tri {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

Étape 2 : On utilise des pseudo éléments : after et :before pour cloner 2 triangles de même taille

.tri:after,.tri:before {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

Étape 3 : Changer les 2 ci-dessus Chaque pseudo-élément subit une transformation de rotation de 70° dans différentes directions

.tri:before {
    transform: rotate(70deg);
}
.tri:after {
    transform: rotate(-70deg);
}

Utiliser CSS3 pour obtenir l'effet de style étoile à cinq branches comme indiqué sur la figure

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!