CSS3 圆形
#CSS3-Circle {
Breite: 150px;
Höhe: 150px;
Grenzradius: 50%;
Hintergrundfarbe: #232323;}
CSS3 椭圆形
#CSS3-ELIPSE {
Breite: 200px;
Höhe: 100px;
Grenzradius: 50%;
Hintergrundfarbe: #232323;}
CSS3 三角形
#CSS3-Triangle {
Breite: 0;
Höhe: 0;
Border-Links: 100px fest transparent;
Grenzrechte: 100px fest transparent;
Grenzboden: 150px Feststoff #232323;}
CSS3 平行四边形
#CSS3-Parallelogramm {
Breite: 200px;
Höhe: 100px;
Hintergrund: #232323;
-Webkit-transform: sack (-45deg);-moz-transform: sack (-45deg);-o-transform: sack (-45de);
Transformation: Sack (-45 Grad);
}
CSS3 梯形
#CSS3-Trapez {
Breite: 100px;
Höhe: 0;
Grenzboden: 100px fest #232323;
Border-Links: 50px fest transparent;
Grenzrechte: 50px fest transparent;
}
CSS3 六角星
#CSS3-SIX-STAR {
Breite: 0;
Höhe: 0;
Position: Relativ;
Grenzboden: 100px fest #232323;
Border-Links: 50px fest transparent;
Grenzrechte: 50px fest transparent;
}#CSS3-SIX-STAR: After {
Inhalt: ;
Breite: 0;
Höhe: 0;
Position: absolut;
links: -50px;
Oben: 35px;
Randtop: 100px fest #232323;
Border-Links: 50px fest transparent;
Grenzrechte: 50px fest transparent;
}
CSS3 五角星
#CSS3-Five-Star {
Breite: 0px;
Höhe: 0px;
Rand: 50px 0;
Position: Relativ;
Anzeige: Block;
Farbe: #232323;
Grenzrechte: 100px fest transparent;
Border-Bottom: 70px Solid #232323;
Grenze links: 100px fest transparent; -moz-transform: drehen (35deg);-webkit-transform: drehen (35 °);
}#CSS3-Five-Star: Vor {{
Border-Bottom: 80px Solid #232323 ;;
Grenze links: 30px fest transparent;
Grenzrechte: 30px fest transparent;
Position: absolut;
Höhe: 0;
Breite: 0;
Oben: -45px;
links: -63px;
Anzeige: Block;
Inhalt: ''; -webkit-transform: rotate (-35deg);-moz-transform: rotate (-35deg);-ms-transform: rotate (-35deg);-o-transform: rotate (-35de);
}#CSS3-Five-Star: After {
Position: absolut;
Anzeige: Block;
Farbe: #232323;
Top: 3px;
links: -105px;
Breite: 0px;
Höhe: 0px;
Grenzrechte: 100px fest transparent;
Border-Bottom: 70px Solid #232323;
Border-Links: 100px fest transparent; -Webkit-transform: rotieren (-70deg);-Moz-Transformation: Drehen (-70de);-ms-transform: drehen (-70de); );
Inhalt: '';
}
CSS3 五边形
#CSS3-Pentagon {
Position: Relativ;
Breite: 54px;
Grenzbreite: 50px 18px 0;
Grenzstil: solide;
Grenzfarbe: #232323 transparent;} #CSS3-Pentagon: Vor {{
Inhalt: ;
Position: absolut;
Höhe: 0;
Breite: 0;
Top: -85px;
links: -18px;
Randbreit: 0 45px 35px;
Grenzstil: solide;
Grenzfarbe: transparent transparent #232323;}
CSS3 六边形
#CSS3-Hexagon {
Breite: 100px;
Höhe: 55px;
Hintergrund: #232323;
Position: Relativ;
}#CSS3-Hexagon: vor {
Inhalt: ;
Position: absolut;
Oben: -25px;
links: 0;
Breite: 0;
Höhe: 0;
Border-Links: 50px fest transparent;
Grenzrechte: 50px fest transparent;
Border-Bottom: 25px Solid #232323; }#CSS3-Hexagon: After {
Inhalt: ;
Position: absolut;
unten: -25px;
links: 0;
Breite: 0;
Höhe: 0;
Border-Links: 50px fest transparent;
Grenzrechte: 50px fest transparent;
Grenztop: 25px fest #232323; }
CSS3 心形
#CSS3-Heart {
Position: Relativ;
Breite: 100px;
Höhe: 90px;
} #CSS3-Heart: Vorher, #CSS3-Heart: After {
Position: absolut;
Inhalt: ;
links: 50px;
Top: 0;
Breite: 50px;
Höhe: 80px;
Hintergrund: #232323;
-moz-border-radius: 50px 50px 0 0;
Border-Radius: 50px 50px 0 0; 45 Grad);
Transformation: Drehen (-45 Grad);-Webkit-Transform-Origin: 0 100%;-Moz-Transform-Origin: 0 100%;-MS-Transform-Origin: 0 100%; %;
Transform-Origin: 0 100%;
}#CSS3-Heart: After {
Links: 0; -Webkit-Transformation: Drehen (45 Grad);-Moz-Transformation: Drehen (45 °);
Transformation: Drehung (45 Grad);-Webkit-Transform-Origin: 100% 100%; 100% 100%;
Transform-Origin: 100% 100%;
}
CSS3 八卦
#CSS3-GOSSIP {
Breite: 96px;
Höhe: 48px;
Hintergrund: #f1f1f1;
Grenzfarbe: #232323;
Grenzstil: solide;
Randbreite: 2px 2px 50px 2px;
Grenzradius: 100%;
Position: Relativ;
}#CSS3-GOSSIP: Vor {
Inhalt: ;
Position: absolut;
Top: 50%;
links: 0;
Hintergrund: #f1f1f1;
Grenze: 18PX Solid #232323;
Grenzradius: 100%;
Breite: 12px;
Höhe: 12px;
}#CSS3-GOSSIP: After {
Inhalt: ;
Position: absolut;
Top: 50%;
Links: 50%;
Hintergrund: #232323;
Grenze: 18PX Solid #f1f1f1;
Grenzradius: 100%;
Breite: 12px;
Höhe: 12px;
}