CSS3 圆形
# CSS3-Circle {
Largeur: 150px;
hauteur: 150px;
Border-Radius: 50%;
Color d'arrière-plan: # 232323;}
CSS3 椭圆形
# css3-elipse {
Largeur: 200px;
hauteur: 100px;
Border-Radius: 50%;
Color d'arrière-plan: # 232323;}
CSS3 三角形
# CSS3-triangle {
Largeur: 0;
hauteur: 0;
Border-Left: 100px solide transparent;
Border-Dight: 100px solide transparent;
Border-Bottom: 150px solide # 232323;}
CSS3 平行四边形
# CSS3-parallélogramme {
Largeur: 200px;
hauteur: 100px;
Contexte: # 232323;
-Webkit-transform: skew (-45deg); - moz-transform: skew (-45deg); - o-transform: skew (-45deg);
Transform: Skew (-45deg);
}
CSS3 梯形
# CSS3-trapézoïde {
Largeur: 100px;
hauteur: 0;
Border-Bottom: 100px solide # 232323;
Border-Left: 50px solide transparent;
Border-droite: 50px solide transparent;
}
CSS3 六角星
# CSS3-six étoiles {
Largeur: 0;
hauteur: 0;
Position: relative;
Border-Bottom: 100px solide # 232323;
Border-Left: 50px solide transparent;
Border-droite: 50px solide transparent;
} # css3-six-étoile: après {
contenu: ;
Largeur: 0;
hauteur: 0;
Position: absolue;
Gauche: -50px;
En haut: 35px;
Border-top: 100px solide # 232323;
Border-Left: 50px solide transparent;
Border-droite: 50px solide transparent;
}
CSS3 五角星
# CSS3-Five-Star {
Largeur: 0px;
hauteur: 0px;
marge: 50px 0;
Position: relative;
Affichage: bloc;
Couleur: # 232323;
Border-Dight: 100px solide transparent;
Border-Bottom: 70px solide # 232323;
Border-Left: 100px solide transparent; -moz-transform: Rotate (35Deg); - WebKit-transform: Rotate (35Deg); - MS-Transform: Rotate (35Deg); - O-Transform: Rotate (35DEG);
} # css3-five-star: avant {
Border-Bottom: 80px solide # 232323 ;;
Border-Left: 30px solide transparent;
Border-Dight: 30px solide transparent;
Position: absolue;
hauteur: 0;
Largeur: 0;
En haut: -45px;
gauche: -63px;
Affichage: bloc;
Contenu: ''; -webkit-transform: rotation (-35deg); - moz-transform: rotate (-35deg); - ms-transform: rotate (-35deg); - o-transform: rotate (-35deg);
} # CSS3-Five-Star: After {
Position: absolue;
Affichage: bloc;
Couleur: # 232323;
En haut: 3px;
Gauche: -105px;
Largeur: 0px;
hauteur: 0px;
Border-Dight: 100px solide transparent;
Border-Bottom: 70px solide # 232323;
Border-Left: 100px solide transparent; -webkit-transform: rotate (-70deg); - moz-transform: rotate (-70deg); - ms-transform: rotation (-70deg); - o-transform: rotation (-70deg ));
contenu: '';
}
CSS3 五边形
# CSS3-Pentagone {
Position: relative;
Largeur: 54px;
largeur de bordure: 50px 18px 0;
Style de la frontière: solide;
Border-Color: # 232323 transparent;} # CSS3-Pentagone: avant {
contenu: ;
Position: absolue;
hauteur: 0;
Largeur: 0;
en haut: -85px;
gauche: -18px;
largeur de bordure: 0 45px 35px;
Style de la frontière: solide;
Color à la frontière: transparent transparent # 232323;}
CSS3 六边形
# css3-hexagon {
Largeur: 100px;
hauteur: 55px;
Contexte: # 232323;
Position: relative;
} # css3-hexagon: avant {
contenu: ;
Position: absolue;
En haut: -25px;
à gauche: 0;
Largeur: 0;
hauteur: 0;
Border-Left: 50px solide transparent;
Border-droite: 50px solide transparent;
Border-Bottom: 25px solide # 232323; } # css3-hexagon: après {
contenu: ;
Position: absolue;
En bas: -25px;
à gauche: 0;
Largeur: 0;
hauteur: 0;
Border-Left: 50px solide transparent;
Border-droite: 50px solide transparent;
Border-top: 25px solide # 232323; }
CSS3 心形
# css3-heart {
Position: relative;
Largeur: 100px;
hauteur: 90px;
} # css3-heart: avant, # css3-heart: après {
Position: absolue;
contenu: ;
Gauche: 50px;
en haut: 0;
Largeur: 50px;
hauteur: 80px;
Contexte: # 232323;
-moz-frontraire-radius: 50px 50px 0 0;
Border-Radius: 50px 50px 0 0; -webkit-transform: rotation (-45deg); - moz-transform: rotate (-45deg); - ms-transform: rotation (-45deg); - o-transform: rotation (- 45deg);
Transform: Rotate (-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%;
} # css3-heart: après {
gauche: 0; -webkit-transform: Rotate (45Deg); - Moz-transform: Rotate (45Deg); - MS-Transform: Rotate (45Deg); - O-Transform: Rotate (45Deg);
Transform: Rotate (45Deg); - Webkit-transform-original: 100% 100%; - moz-transform-origin: 100% 100%; - MS-transform-origin: 100% 100%; - o-transform-original: 100% 100%;
Transform-Origin: 100% 100%;
}
CSS3 八卦
# css3-gossip {
Largeur: 96px;
hauteur: 48px;
Contexte: # f1f1f1;
Color à la frontière: # 232323;
Style de la frontière: solide;
largeur de bordure: 2px 2px 50px 2px;
Border-Radius: 100%;
Position: relative;
} # css3-gossip: avant {
contenu: ;
Position: absolue;
en haut: 50%;
à gauche: 0;
Contexte: # f1f1f1;
Border: 18px solide # 232323;
Border-Radius: 100%;
Largeur: 12px;
hauteur: 12px;
} # css3-gossip: après {
contenu: ;
Position: absolue;
en haut: 50%;
Gauche: 50%;
Contexte: # 232323;
Border: 18px solide # f1f1f1;
Border-Radius: 100%;
Largeur: 12px;
hauteur: 12px;
}