CSS3 menggambar grafik dasar, bulat, oval, segitiga, dll.

CSS3 圆形

#CSS3-Circle {

Lebar: 150px;

Tinggi: 150px;

Border-Radius: 50%;

Latar Belakang: #232323;}

CSS3 椭圆形

#CSS3-ELIPSE {

Lebar: 200px;

Tinggi: 100px;

Border-Radius: 50%;

Latar Belakang: #232323;}

CSS3 三角形

#CSS3-TRIZLE {

Lebar: 0;

Tinggi: 0;

Perbatasan-kiri: 100px transparan padat;

Border-Right: 100px Solid Transparent;

Border-Bottom: 150px Solid #232323;}

CSS3 平行四边形

#CSS3-parallelogram {

Lebar: 200px;

Tinggi: 100px;

Latar belakang: #232323;

-webkit-transform: skew (-45deg);-moz-transform: skew (-45deg);-o-transform: skew (-45deg);

Transformasi: Skew (-45deg);

}

CSS3 梯形

#CSS3-Trapezoid {

Lebar: 100px;

Tinggi: 0;

Border-Bottom: 100px Solid #232323;

Perbatasan-kiri: 50px transparan padat;

Border-Right: 50px Solid Transparent;

}

CSS3 六角星

#css3-six-star {

Lebar: 0;

Tinggi: 0;

Posisi: kerabat;

Border-Bottom: 100px Solid #232323;

Perbatasan-kiri: 50px transparan padat;

Border-Right: 50px Solid Transparent;

}#css3-six-star: setelah {

isi: ;

Lebar: 0;

Tinggi: 0;

Posisi: Absolute;

Kiri: -50px;

Atas: 35px;

Border-Top: 100px Solid #232323;

Perbatasan-kiri: 50px transparan padat;

Border-Right: 50px Solid Transparent;

}

CSS3 五角星

#css3-five-star {

Lebar: 0px;

Tinggi: 0px;

Margin: 50px 0;

Posisi: kerabat;

Tampilan: Blok;

Warna: #232323;

Border-Right: 100px Solid Transparent;

Border-Bottom: 70px Solid #232323;

Border-Left: 100px Solid Transparent; -Moz-Transform: Rotate (35deg);-Webkit-Transform: Rotate (35deg);-MS-Transform: Rotate (35deg);-O-Transform: Rotate (35deg);

}#css3-five-star: sebelum {

Border-Bottom: 80px Solid #232323 ;;

Border-Left: 30px Solid Transparent;

Border-Right: 30px Solid Transparent;

Posisi: Absolute;

Tinggi: 0;

Lebar: 0;

Atas: -45px;

Kiri: -63px;

Tampilan: Blok;

Konten: ''; -webkit-Transform: rotate (-35deg);-Moz-Transform: Rotate (-35deg);-MS-Transform: Rotate (-35deg);-O-Transform: Rotate (-35deg);

}#css3-five-star: After {

Posisi: Absolute;

Tampilan: Blok;

Warna: #232323;

Atas: 3px;

Kiri: -105px;

Lebar: 0px;

Tinggi: 0px;

Border-Right: 100px Solid Transparent;

Border-Bottom: 70px Solid #232323;

Border-left: 100px solid transparan; -webkit-transform: rotate (-70deg);-moz-transform: rotate (-70deg);-ms-transform: rotate (-70deg);-o-transform: rotate (-70deg );

isi: '';

}

CSS3 五边形

#CSS3-Pentagon {

Posisi: kerabat;

Lebar: 54px;

BERBATAS BERBATAS: 50px 18px 0;

Gaya perbatasan: solid;

Border-Color: #232323 Transparent;} #CSS3-Pentagon: Sebelum {

isi: ;

Posisi: Absolute;

Tinggi: 0;

Lebar: 0;

TOP: -85px;

Kiri: -18px;

Perbatasan-lebar: 0 45px 35px;

Gaya perbatasan: solid;

Color Border: Transparan Transparan #232323;}

CSS3 六边形

#css3-hexagon {

Lebar: 100px;

Tinggi: 55px;

Latar belakang: #232323;

Posisi: kerabat;

}#css3-hexagon: sebelum {

isi: ;

Posisi: Absolute;

Atas: -25px;

Kiri: 0;

Lebar: 0;

Tinggi: 0;

Perbatasan-kiri: 50px transparan padat;

Border-Right: 50px Solid Transparent;

Border-Bottom: 25px Solid #232323; }#css3-hexagon: setelah {

isi: ;

Posisi: Absolute;

Bawah: -25px;

Kiri: 0;

Lebar: 0;

Tinggi: 0;

Perbatasan-kiri: 50px transparan padat;

Border-Right: 50px Solid Transparent;

Border-Top: 25px Solid #232323; }

CSS3 心形

#css3-heart {

Posisi: kerabat;

Lebar: 100px;

Tinggi: 90px;

} #CSS3-HEART: Sebelumnya, #CSS3-HEART: After {

Posisi: Absolute;

isi: ;

Kiri: 50px;

TOP: 0;

Lebar: 50px;

Tinggi: 80px;

Latar belakang: #232323;

-Moz-border-radius: 50px 50px 0 0;

Border-Radius: 50px 50px 0 0; -webkit-Transform: Rotate (-45deg);-Moz-Transform: Rotate (-45deg);-MS-Transform: Rotate (-45deg);-O-Transform: Rotate (- 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: After {

Kiri: 0; -webkit-Transform: Rotate (45deg);-Moz-Transform: Rotate (45deg);-MS-Transform: Rotate (45deg);-O-Transform: Rotate (45deg);

Transform: Rotate (45deg);-Webkit-Transform-Origin: 100% 100%;-Moz-Transform-Origin: 100% 100%;-MS-Transform-Origin: 100% 100%;-O-Transform-Origin: 100% 100%;

Transform-Origin: 100% 100%;

}

CSS3 八卦

#css3-gosip {

Lebar: 96px;

Tinggi: 48px;

Latar belakang: #f1f1f1;

Border-color: #232323;

Gaya perbatasan: solid;

Batas-lebar: 2px 2px 50px 2px;

Border-Radius: 100%;

Posisi: kerabat;

}#css3-gosip: sebelum {

isi: ;

Posisi: Absolute;

Atas: 50%;

Kiri: 0;

Latar belakang: #f1f1f1;

Perbatasan: 18px Solid #232323;

Border-Radius: 100%;

Lebar: 12px;

Tinggi: 12px;

}#css3-gosip: setelah {

isi: ;

Posisi: Absolute;

Atas: 50%;

Kiri: 50%;

Latar belakang: #232323;

Perbatasan: 18px solid #f1f1f1;

Border-Radius: 100%;

Lebar: 12px;

Tinggi: 12px;

}