CSS3圆形
#css3-circle {
宽度:150px;
身高:150px;
边界拉迪乌斯:50%;
背景色:#232323;}
CSS3椭圆形
#css3- elipse {
宽度:200px;
身高:100px;
边界拉迪乌斯:50%;
背景色:#232323;}
CSS3三角形
#css3-triangle {
宽度:0;
身高:0;
边界左:100px实心透明;
边界权利:100px实心透明;
边界底:150px实心#232323;}
CSS3平行四边形
#css3-并行图{
宽度:200px;
身高:100px;
背景:#232323;
-webkit-transform:Skew(-45deg); - Moz-Transform:Skew(-45deg); - O-Transform:Skew(-45deg);
变换:偏斜(-45DEG);
}
CSS3梯形
#css3-trapezoid {
宽度:100px;
身高:0;
边界底:100px实心#232323;
边界左:50px实心透明;
边界权利:50px实心透明;
}
CSS3六角星
#CSS3-SIX-Star {
宽度:0;
身高:0;
位置:相对;
边界底:100px实心#232323;
边界左:50px实心透明;
边界权利:50px实心透明;
}#css3-six-star:之后{
内容: ;
宽度:0;
身高:0;
位置:绝对;
左:-50px;
顶部:35px;
边界顶:100px实心#232323;
边界左:50px实心透明;
边界权利:50px实心透明;
}
CSS3五角星
#css3-five-star {
宽度:0px;
身高:0px;
保证金:50px 0;
位置:相对;
显示:块;
颜色:#232323;
边界权利:100px实心透明;
边界底:70px实心#232323;
边界左:100px实心透明; -moz-Transform:旋转(35DEG); - WebKit-Transform:旋转(35DEG); - MS-TRANSFORM:旋转:旋转(35DEG); - O-Transform:o-Transform:rotate(35维(35维);
}#css3-five-star:{
边界底:80px实心#232323 ;;
边界左:30px实心透明;
边界权利:30px实心透明;
位置:绝对;
身高:0;
宽度:0;
顶部:-45px;
左:-63px;
显示:块;
内容:''; -webkit-transform:旋转(-35deg); - moz-transform:旋转(-35deg); - ms-transform:rotate:rotate(-35deg); - o-transform:rotate:rotate(-35deg);
}#css3-five-star:之后{
位置:绝对;
显示:块;
颜色:#232323;
顶部:3px;
左:-105px;
宽度:0px;
身高:0px;
边界权利:100px实心透明;
边界底:70px实心#232323;
边界左:100px实心透明; -webkit-transform:旋转(-70deg); - moz-transform:旋转(-70deg); - ms-transform:rotate:rotate(-70deg); - o-o-transform:rotate:rotate(-70deg) );
内容: '';
}
CSS3五边形
#css3-pentagon {
位置:相对;
宽度:54px;
边缘宽度:50px 18px 0;
边界风格:固体;
边界色:#232323透明;}#css3-pentagon:{
内容: ;
位置:绝对;
身高:0;
宽度:0;
顶部:-85px;
左:-18px;
边缘宽度:0 45px 35px;
边界风格:固体;
边界色:透明透明#232323;}
CSS3六边形
#css3-hexagon {
宽度:100px;
身高:55px;
背景:#232323;
位置:相对;
}#css3-hexagon:{
内容: ;
位置:绝对;
顶部:-25px;
左:0;
宽度:0;
身高:0;
边界左:50px实心透明;
边界权利:50px实心透明;
边界底:25px实心#232323; }#css3-hexagon:{之后{
内容: ;
位置:绝对;
底部:-25px;
左:0;
宽度:0;
身高:0;
边界左:50px实心透明;
边界权利:50px实心透明;
边界顶:25px实心#232323; }
CSS3心形
#css3-heart {
位置:相对;
宽度:100px;
身高:90px;
}#css3-heart:之前,#css3-heart:{之后{
位置:绝对;
内容: ;
左:50px;
顶部:0;
宽度:50px;
身高:80px;
背景:#232323;
-moz-border-radius:50px 50px 0 0;
Border-Radius:50px 50px 0 0; -webkit-transform:旋转(-45DEG); - moz-transform:旋转(-45DEG); - ms-transform:rotate:rotate(-45deg); - o-o-transform:rotate:rotate:rotate(- 45DEG);
变换:旋转(-45DEG); - WebKit-Transform-Origin:0 100%; -Moz-Moz-Transform-Origin:0 100%; - MS-Transform-Origin:0 100%; - O-Transform-Origin:0 100 100 %;
转化原始:0 100%;
}#css3-heart:{之后{
左:0; -webkit-transform:旋转(45DEG); - moz-transform:旋转(45DEG); - ms-transform:旋转(45DEG); - o-o-transform:旋转:旋转(45DEG);
变换:旋转(45DEG); - Webkit-transform-Origin:100%100%; -Moz-Moz-Transform-Origin:100%100%; - MS-Transform-Origin:100%100%100%; - O-O-Transform-Origin: 100%100%;
转化原始:100%100%;
}
CSS3八卦
#css3-gossip {
宽度:96px;
身高:48px;
背景:#f1f1f1;
边界色:#232323;
边界风格:固体;
边缘宽度:2PX 2PX 50PX 2PX;
边界拉迪乌斯:100%;
位置:相对;
}#css3-gossip:{
内容: ;
位置:绝对;
顶部:50%;
左:0;
背景:#f1f1f1;
边界:18px实心#232323;
边界拉迪乌斯:100%;
宽度:12px;
身高:12px;
}#css3-gossip:{之后{
内容: ;
位置:绝对;
顶部:50%;
左:50%;
背景:#232323;
边界:18px实心#f1f1f1;
边界拉迪乌斯:100%;
宽度:12px;
身高:12px;
}