Comment écrire une étoile à cinq branches en CSS

Comment écrire une étoile à cinq branches en CSS : créez d'abord un exemple de fichier HTML ; puis créez un div via la petite classe de nom ; enfin, définissez "transform: rotate(70deg);" -étoile pointue.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

Utilisez le CSS pour réaliser l'étoile à cinq branches

La grande étoile à cinq branches

Créez le div à travers la classe de petits noms

.small-all{
display: flex;
margin:1rem 13%;
}
.small {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    height: 0;
    margin-top: 9.375px;
    margin-bottom: 6.02679px;
    position: relative;
    width: 0;
    margin: 2rem 0.8rem;
}
.small:before,.small:after {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    content: '';
    display: block;
    height: 0;
    left: -15px;
    position: absolute;
    top: -9.375px;
    width: 0;
}
.small:before {
    transform: rotate(70deg);
}
.small:after {
    transform: rotate(-70deg);
}

Pour obtenir l'effet

Petite étoile à cinq branches

Créez div

.smaller {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    height: 0;
    margin-right: 1.2rem;
    margin-top: 5px;
    margin-bottom: 3.21429px;
    position: relative;
    width: 0;
}
.smaller:before,.smaller:after {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    content: '';
    display: block;
    height: 0;
    left: -10px;
    position: absolute;
    top: -5px;
    width: 0;
}
.smaller:before {
    transform: rotate(70deg);
}
.smaller:after {
    transform: rotate(-70deg);
}

à travers une classe de noms plus petite pour obtenir l'effet

Apprentissage recommandé : " 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!