CSS dessine une étoile à cinq branches_CSS/HTML

1 Hexagone

Copier le code Le code est le suivant :

#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom : 100px rouge uni ;
position : relative;
}
#star-six:after {
width : 0;
height : 0;
border- gauche : 50 px uni transparent ;
bordure droite : 50 px uni transparent ;
bordure supérieure : 100 px rouge uni ;
position : absolue ;
contenu : " " ;
haut : 30 px ;
gauche : -50px;
}

2 Pentacles

Copier le code Le code est le suivant :

#star-five {
margin: 50px 0;
position: relative;
display: block;
couleur: rouge;
width: 0px;
hauteur : 0px ;
bordure droite : 100 px solide transparent ;
bordure inférieure : 70 px rouge uni ;
bordure gauche : 100px solide transparent ;
-moz-transform : rotation (35deg );
-webkit-transform : rotation (35deg);
-ms-transform : rotation (35deg);
-o-transform : rotation (35deg);
>
#star -cinq :avant {
border-bottom : 80px solid red;
border-left : 30px solid transparent;
border-right : 30px solid transparent;
position : absolue;
height : 0;
largeur : 0;
haut : -45px;
gauche : -65px;
affichage : bloc ;
contenu : '';
-webkit-transform : rotation( -35deg );
-moz-transform : rotation (-35deg);
-ms-transform : rotation (-35deg);
-o-transform : rotation (-35deg);

}
#star-five:after {
position: absolue;
affichage: bloc;
couleur: rouge;
haut: 3px;
gauche: -105px;
largeur : 0px;
hauteur : 0px;
bordure droite : 100 px solide transparent ;
bordure inférieure : 70px rouge uni ;
bordure gauche : 100px solide transparent ;
- webkit- transform : rotation (-70deg);
-moz-transform : rotation (-70deg);
-ms-transform : rotation (-70deg);
-o-transform : rotation (-70deg) );
contenu : '';
}

3 Pentagone

Copier le code Le code est le suivant :

#pentagone {
position : relative ;
width : 54px;
border-width : 50px 18px 0;
border-style : solid;
border- couleur : rouge transparent;
}
#pentagone:avant {
contenu : "";
position : absolue;
hauteur : 0;
largeur : 0;
haut : -85px;
gauche: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent rouge transparent;
}

4 hexagones

复制代码 代码如下 :

#hexagone {
    largeur : 100px;
    hauteur : 55px;
    fond : rouge;
    position : relative;
}
#hexagone:avant {
    contenu : "";
    position : absolue;
    haut : -25px;
    gauche : 0;
    largeur : 0;
    hauteur : 0 ;
    bordure gauche : 50px transparent uni;
    border-right : 50px transparent uni;
    border-bottom : 25px rouge uni;
}
#hexagon:after {
    content: "";
    position : absolu;
    bas : -25px;
    gauche : 0;
    largeur : 0;
    hauteur : 0;
    bordure gauche : 50 px solide transparent ;
    bordure droite : 50px transparent uni ;
    border-top : 25px rouge uni ;
}

5 多边形

复制代码 代码如下:

#octagone {
    largeur : 100px;
    hauteur : 100px;
    fond : rouge;
    position : relative;
}

#octagon:before {
    contenu : "";
    position : absolue;
    haut : 0;
    gauche : 0;
    bordure inférieure : 29 px rouge uni ;
    bordure gauche : 29px solide #eee;
    border-right: 29px solid #eee;
    width: 42px;
    hauteur : 0;
}

#octagon:after {
    content: " ";
    position : absolue;
    en bas : 0;
    gauche : 0;
    bordure en haut : 29 px rouge uni;
    bordure-gauche : 29 px solide #eee;
    border -droite : 29px solide #eee;
    largeur : 42px;
    hauteur : 0;
}

6 心形

复制代码 代码如下 :

#coeur {
    position : relative;
    largeur : 100px;
    hauteur : 90px;
}
#coeur:avant,
#coeur:après {
    position : absolue;
    contenu : "";
    gauche : 50px;
    haut : 0;
    largeur : 50px;
    hauteur : 80px;
    fond : rouge;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotation(-45deg);
       -moz-transform : rotation (-45deg);
        -ms-transform : rotation (-45deg);
         -o-transform : rotation (-45deg);
            transform : rotation (-45deg);
    -webkit- transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin : 0 100 %;
            transform-origin: 0 100%;
}
#heart:after {
    gauche : 0;
    -webkit-transform: rotate(45deg);
       -moz-transform : rotation (45deg);
        -ms-transform: rotation (45deg);
         -o-transform: rotation (45deg);
            transformation : rotation (45deg);
    -webkit-transform- origine: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100 %;
            transform-origin :100% 100%;
}