CSS melukis bintang lima mata_CSS/HTML

1 Sechseck

Code kopieren Der Code lautet wie folgt:

#star-six {
Breite: 0;
Höhe: 0;
Rand links: 50 Pixel durchgehend transparent;
Rand rechts: 50 Pixel durchgehend transparent;
border-bottom: 100px einfarbig rot;
position: relativ;
}
#star-six:after {
width: 0;
height: 0;
border- links: 50 Pixel durchgehend transparent;
Rand rechts: 50 Pixel durchgehend transparent;
Rand oben: 100 Pixel durchgehend rot;
Position: absolut;
Inhalt: "";
oben: 30 Pixel;
links: -50px;
}

2 Pentacles

Code kopieren Der Code lautet wie folgt:

#star-fünf {
Rand: 50px 0;
Position: relativ;
Anzeige: Block;
Farbe: Rot;
Breite: 0px;
Höhe: 0 Pixel;
Rand rechts: 100 Pixel durchgehend transparent;
Rand unten: 70 Pixel durchgehend rot;
Rand links: 100 Pixel durchgehend transparent;
-moz-transform: rotieren (35 Grad );
-webkit-transform: rotieren (35 Grad);
-ms-transform: rotieren (35 Grad);
-o-transform: rotieren (35 Grad);
}
#star -fünf :before {
border-bottom: 80px durchgehend rot;
border-left: 30px durchgehend transparent;
border-right: 30px durchgehend transparent;
Position: absolut;
height: 0;
Breite: 0;
oben: -45px;
links: -65px;
Anzeige: Block;
Inhalt: '';
-webkit-transform: rotieren( -35 Grad );
-moz-transform: drehen (-35 Grad);
-ms-transform: drehen (-35 Grad);
-o-transform: drehen (-35 Grad);

}
#star-fünf:nach {
Position: absolut;
Anzeige: Block;
Farbe: rot;
oben: 3px;
links: -105px;
Breite: 0px;
Höhe: 0px;
Rand rechts: 100 Pixel durchgehend transparent;
Rand unten: 70 Pixel durchgehend rot;
Rand links: 100 Pixel durchgehend transparent;
- webkit-transform: rotieren(-70 Grad);
-moz-transform: rotieren(-70 Grad);
-ms-transform: rotieren(-70 Grad);
-o-transform: rotieren(-70 Grad). );
Inhalt: '';
}

3 Pentagon

Code kopieren Der Code lautet wie folgt:

#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border- Farbe: rot transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top : -85px;
links: -18px;
Randbreite: 0 45px 35px;
Randstil: einfarbig;
Randfarbe: transparent transparent rot;
}

4 heksagon

复制代码 代码如䎜:

#heksagon {

    lebar: 100px;
    tinggi: 55px;
    latar belakang: merah;
    kedudukan: relatif;
}
#hexa >    kandungan: "";
    kedudukan: mutlak;
    atas: -25px;
    kiri: 0;
    lebar: 0;
    tinggi: 0; pepejal lutsinar;
    sempadan-kanan: 50px pepejal lutsinar;
    sempadan-bawah: 25px pepejal merah;
}
#heksagon:selepas {
    kandungan: "";
    kedudukan: mutlak;
    bawah: -25px;
    kiri: 0;
    lebar: 0;
    tinggi: 0;
    sempadan-kiri: 50px tertib padu-kanan;    bahagian atas sempadan: 25px merah pepejal;
}




5 多边形

复制代码

代玠: 代玠🎜>#oktagon {    lebar: 100px;    tinggi: 100px;    latar belakang: merah;    kedudukan: relatif;

}

    kandungan: "";
    kedudukan: mutlak;
    atas: 0;
    kiri: 0;
    bawah sempadan: 29px merah pepejal;
 left  b #eee;
    sempadan-kanan: 29px pepejal #eee;
    lebar: 42px;
    tinggi: 0;
}

#oktagon:selepas {
:    kandungan ";
    kedudukan: mutlak;
    bawah: 0;
    kiri: 0;
    atas sempadan: 29px merah pepejal;
    kiri sempadan: 29px  border #eee>     lebar: 42px;
    tinggi: 0;
}




6 心形

复制代码
代码:妁

#jantung {
    kedudukan: relatif;
    lebar: 100px;
    tinggi: 90px;
}
#jantung:sebelum,
#hati:selepas
    kedudukan: mutlak;
    kandungan: "";
    kiri: 50px;
    atas: 0;
    lebar: 50px;
     tinggi: 🎜>                                                               
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
  moz-transform:      (-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg>);   -web>);   -web> transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -0%;
            transform-origin: 0 100%;
}
#heart:selepas {
    kiri: 0;
    -webkit-transform: rotate(45deg); mo z    : putar(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);  transform -web> Asal: 100% 100%;
-Moz-transform-usin: 100% 100%; -ms-transform-origin: 100% 100%;
-O-transform-origin: 100% 100 %;
            asal-transformasi :100% 100%;
}