CSS zeichnet fünfzackigen Stern_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 Sechseck

复制代码 代码如下:

#Hexagon >    Inhalt: "";
    Position: absolut;
    oben: -25px;
    links: 0;
    Breite: 0;
    Höhe: 0;
    Rand links: 50 Pixel durchgehend transparent;
    Rahmen rechts: 50 Pixel durchgehend transparent;
    Rahmen unten: 25 Pixel durchgehend rot;
}
#hexagon:after {
    Inhalt: "";
    Position: absolut;
    unten: -25px;
    links: 0;
    Breite: 0;
    Höhe: 0;
    Rand links: 50 Pixel durchgehend transparent;
    Rand rechts: 50 Pixel durchgehend transparent;
    Rahmen oben: 25 Pixel durchgehend rot;
}




5 多边形

复制代码
代码如下:

#octagon {    width: 100px;    height: 100px;    background: red;    position: relative;}

#octagon:before {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 0;
    Rahmen unten: 29 Pixel durchgehend rot;
    Rahmen links: 29 Pixel durchgehend #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

#octagon:after {
   ";
    Position: absolut;
    unten: 0;
    links: 0;
    Rahmen oben: 29 Pixel durchgehend rot;
    Rahmen links: 29 Pixel durchgehend #eee;
    Rahmen -right: 29px solid #eee;
    width: 42px;
    height: 0;
}




6 心形

复制代码
代码如下:

#heart {
    위치: 상대;
    너비: 100px;
    높이: 90px;
}
#heart:전,
#heart:후 {
    위치: 절대;
    내용: "";
    왼쪽: 50px;
    위쪽: 0;
    너비: 50px;
    높이: 80px;
    배경: 빨간색;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: 회전(-45deg);
       -moz-transform: 회전 (-45deg);
        -ms-transform: 회전(-45deg);
         -o-transform: 회전(-45deg);
            변환: 회전(-45deg);
    -webkit- 변환 원본: 0 100%;
       -moz-변형-원점: 0 100%;
        -ms-변환-원점: 0 100%;
        -o-변형-원점: 0 100%;
            변환 원본: 0 100%;
}
#heart:after {
    왼쪽: 0;
    -webkit-transform: 회전(45deg);
       -moz-transform : 회전(45deg);
        -ms-transform: 회전(45deg);
         -o-transform: 회전(45deg);
            변환: 회전(45deg);
    -webkit-transform- 출처: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100 %;
            변환 원본 :100% 100%;
}