CSS3 圆形
#CSS3-Circle {
Ancho: 150px;
Altura: 150px;
Radio fronterizo: 50%;
Color de fondo: #232323;}
CSS3 椭圆形
#CSS3-ELIPSE {
Ancho: 200px;
Altura: 100px;
Radio fronterizo: 50%;
Color de fondo: #232323;}
CSS3 三角形
#CSS3-Triángulo {
Ancho: 0;
Altura: 0;
Border-izquierda: 100px sólido transparente;
Border-Right: 100px sólido transparente;
Border-Bottom: 150px Solid #232323;}
CSS3 平行四边形
#CSS3-Parallelogram {
Ancho: 200px;
Altura: 100px;
Antecedentes: #232323;
-webkit-transform: skew (-45deg);-moz-transform: skew (-45deg);-o-transform: skew (-45deg);
transformar: sesgo (-45deg);
}
CSS3 梯形
#CSS3-Trapezoid {
Ancho: 100px;
Altura: 0;
Border-Bottom: 100px Solid #232323;
Border-izquierda: 50px sólido transparente;
Border-Right: 50px sólido transparente;
}
CSS3 六角星
#CSS3-Sex-Star {
Ancho: 0;
Altura: 0;
Posición: relativo;
Border-Bottom: 100px Solid #232323;
Border-izquierda: 50px sólido transparente;
Border-Right: 50px sólido transparente;
}#CSS3-SIX-STAR: After {
contenido: ;
Ancho: 0;
Altura: 0;
Posición: Absoluto;
Izquierda: -50px;
Arriba: 35px;
Border-Top: 100px Solid #232323;
Border-izquierda: 50px sólido transparente;
Border-Right: 50px sólido transparente;
}
CSS3 五角星
#CSS3-Five-Star {
Ancho: 0px;
Altura: 0px;
margen: 50px 0;
Posición: relativo;
Pantalla: bloque;
Color: #232323;
Border-Right: 100px sólido transparente;
Border-Bottom: 70px Solid #232323;
Border-izquierda: 100px sólido transparente; -MOZ-transform: rotar (35deg);-WebKit-Transform: Rotate (35deg);-MS-Transform: Rotate (35deg);-O-Transform: Rotate (35deg);
}#CSS3-Five-Star: antes {
Border-Bottom: 80px Solid #232323 ;;
Border-izquierda: 30px sólido transparente;
Border-Right: 30px sólido transparente;
Posición: Absoluto;
Altura: 0;
Ancho: 0;
arriba: -45px;
Izquierda: -63px;
Pantalla: bloque;
contenido: ''; -webkit-transform: rotar (-35deg);-Moz-Transform: Rotate (-35deg);-MS-Transform: Rotate (-35deg);-O-Transform: Rotate (-35deg);
}#CSS3-Five-Star: After {
Posición: Absoluto;
Pantalla: bloque;
Color: #232323;
arriba: 3px;
Izquierda: -105px;
Ancho: 0px;
Altura: 0px;
Border-Right: 100px sólido transparente;
Border-Bottom: 70px Solid #232323;
Libre de borde: 100px transparente sólido; -webkit-transform: rotar (-70deg);-Moz-transform: rotar (-70deg);-MS-Transform: Rotate (-70deg);-O-Transform: Rotate (-70DEG );
contenido: '';
}
CSS3 五边形
#CSS3-Pentágono {
Posición: relativo;
Ancho: 54px;
ancho de la frontera: 50px 18px 0;
estilo fronterizo: sólido;
Border-Color: #232323 transparente;} #CSS3-Pentágono: antes {
contenido: ;
Posición: Absoluto;
Altura: 0;
Ancho: 0;
arriba: -85px;
Izquierda: -18px;
ancho de borde: 0 45px 35px;
estilo fronterizo: sólido;
color de borde: transparente transparente #232323;}
CSS3 六边形
#CSS3-Hexagon {
Ancho: 100px;
Altura: 55px;
Antecedentes: #232323;
Posición: relativo;
}#css3-hexagon: antes {
contenido: ;
Posición: Absoluto;
arriba: -25px;
Izquierda: 0;
Ancho: 0;
Altura: 0;
Border-izquierda: 50px sólido transparente;
Border-Right: 50px sólido transparente;
Border-Bottom: 25px Solid #232323; }#css3-hexagon: después {
contenido: ;
Posición: Absoluto;
Abajo: -25px;
Izquierda: 0;
Ancho: 0;
Altura: 0;
Border-izquierda: 50px sólido transparente;
Border-Right: 50px sólido transparente;
Border-Top: 25px Solid #232323; }
CSS3 心形
#CSS3-Heart {
Posición: relativo;
Ancho: 100px;
Altura: 90px;
} #CSS3-Heart: antes, #CSS3-Heart: After {
Posición: Absoluto;
contenido: ;
Izquierda: 50px;
arriba: 0;
Ancho: 50px;
Altura: 80px;
Antecedentes: #232323;
-Moz-Border-Radius: 50px 50px 0 0;
border-radio: 50px 50px 0 0; -webkit-transform: rotar (-45deg);-Moz-Transform: Rotate (-45deg);-MS-Transform: Rotate (-45deg);-O-Transform: Rotate (----- 45deg);
transformación: rotar (-45deg);-WebKit-Transform-Origin: 0 100%;-Moz-Transform-Origin: 0 100%;-Ms-Transform-Origin: 0 100%;-O-Transform-Origin: 0 100 100 %;
transformación-origen: 0 100%;
}#CSS3-Heart: After {
Izquierda: 0; -Webkit-Transform: Rotate (45deg);-Moz-Transform: Rotate (45deg);-MS-Transform: Rotate (45deg);-O-Transform: Rotate (45deg);
transformación: rotar (45deg);-WebKit-Transform-Origin: 100% 100%;-Moz-Transform-Origin: 100% 100%;-Ms-Transform-Origin: 100% 100%;-O-Transform-Origin: 100% 100%;
Originato de transformación: 100% 100%;
}
CSS3 八卦
#CSS3-GOSSIP {
Ancho: 96px;
Altura: 48px;
Antecedentes: #F1F1F1;
Color de la frontera: #232323;
estilo fronterizo: sólido;
ancho de borde: 2px 2px 50px 2px;
Border-Radius: 100%;
Posición: relativo;
}#css3-gossip: antes {
contenido: ;
Posición: Absoluto;
arriba: 50%;
Izquierda: 0;
Antecedentes: #F1F1F1;
borde: 18px Solid #232323;
Border-Radius: 100%;
Ancho: 12px;
Altura: 12px;
}#css3-gossip: después {
contenido: ;
Posición: Absoluto;
arriba: 50%;
Izquierda: 50%;
Antecedentes: #232323;
borde: 18px sólido #f1f1f1;
Border-Radius: 100%;
Ancho: 12px;
Altura: 12px;
}