CSS3 วาดกราฟิกพื้นฐาน, กลม, รูปไข่, สามเหลี่ยม ฯลฯ

CSS3 圆形

#css3-circle {

ความกว้าง: 150px;

ความสูง: 150px;

แนวชายแดน: 50%;

พื้นหลังสี: #232323;}

CSS3 椭圆形

#css3-elipse {

ความกว้าง: 200px;

ความสูง: 100px;

แนวชายแดน: 50%;

พื้นหลังสี: #232323;}

CSS3 三角形

#css3-triangle {

ความกว้าง: 0;

ความสูง: 0;

ชายแดนซ้าย: 100px ของแข็งโปร่งใส;

ชายแดนขวา: 100px ของแข็งโปร่งใส;

ขอบด้านล่าง: 150px Solid #232323;}

CSS3 平行四边形

#css3-parallelogram {

ความกว้าง: 200px;

ความสูง: 100px;

ความเป็นมา: #232323;

-webkit-transform: SKEW (-45DEG);-MOZ-TRANSFORM: SKEW (-45DEG);-O-Transform: SKEW (-45DEG);

แปลง: SKEW (-45DEG);

-

CSS3 梯形

#CSS3-Trapezoid {

ความกว้าง: 100px;

ความสูง: 0;

ขอบด้านล่าง: 100px Solid #232323;

ชายแดนซ้าย: 50px ของแข็งโปร่งใส;

ชายแดนขวา: 50px ของแข็งโปร่งใส;

-

CSS3 六角星

#css3-six-star {

ความกว้าง: 0;

ความสูง: 0;

ตำแหน่ง: ญาติ;

ขอบด้านล่าง: 100px Solid #232323;

ชายแดนซ้าย: 50px ของแข็งโปร่งใส;

ชายแดนขวา: 50px ของแข็งโปร่งใส;

}#css3-six-star: หลัง {

เนื้อหา: ;

ความกว้าง: 0;

ความสูง: 0;

ตำแหน่ง: สัมบูรณ์;

ซ้าย: -50px;

ด้านบน: 35px;

ชายแดนด้านบน: 100px Solid #232323;

ชายแดนซ้าย: 50px ของแข็งโปร่งใส;

ชายแดนขวา: 50px ของแข็งโปร่งใส;

-

CSS3 五角星

#css3-five-star {

ความกว้าง: 0px;

ความสูง: 0px;

มาร์จิ้น: 50px 0;

ตำแหน่ง: ญาติ;

แสดง: บล็อก;

สี: #232323;

ชายแดนขวา: 100px ของแข็งโปร่งใส;

ขอบด้านล่าง: 70px Solid #232323;

ชายแดนซ้าย: 100px ทึบโปร่งใส; -MOZ-transform: หมุน (35DEG);-WebKit-transform: หมุน (35DEG);-MS-transform: หมุน (35DEG);-O-transform: หมุน (35DEG);

}#css3-five-star: ก่อน {

ขอบด้านล่าง: 80px Solid #232323 ;;

ชายแดนซ้าย: 30px ของแข็งโปร่งใส;

ชายแดนขวา: 30px ของแข็งโปร่งใส;

ตำแหน่ง: สัมบูรณ์;

ความสูง: 0;

ความกว้าง: 0;

ด้านบน: -45px;

ซ้าย: -63px;

แสดง: บล็อก;

เนื้อหา: ''; -webkit-transform: หมุน (-35Deg);-MOZ-Transform: หมุน (-35Deg);-MS-transform: หมุน (-35Deg);-O-transform: หมุน (-35Deg);

}#css3-five-star: หลังจาก {

ตำแหน่ง: สัมบูรณ์;

แสดง: บล็อก;

สี: #232323;

ด้านบน: 3px;

ซ้าย: -105px;

ความกว้าง: 0px;

ความสูง: 0px;

ชายแดนขวา: 100px ของแข็งโปร่งใส;

ขอบด้านล่าง: 70px Solid #232323;

ชายแดนซ้าย: 100px ทึบโปร่งใส; -webkit-transform: หมุน (-70deg);-moz-transform: หมุน (-70deg);-MS-transform: หมุน (-70deg);-o-transform: 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 Solid #232323; }#css3-hexagon: หลังจาก {

เนื้อหา: ;

ตำแหน่ง: สัมบูรณ์;

ด้านล่าง: -25px;

ซ้าย: 0;

ความกว้าง: 0;

ความสูง: 0;

ชายแดนซ้าย: 50px ของแข็งโปร่งใส;

ชายแดนขวา: 50px ของแข็งโปร่งใส;

ชายแดนด้านบน: 25px Solid #232323; -

CSS3 心形

#css3-heart {

ตำแหน่ง: ญาติ;

ความกว้าง: 100px;

ความสูง: 90px;

} #css3-heart: ก่อนหน้า, #css3-heart: หลังจาก {

ตำแหน่ง: สัมบูรณ์;

เนื้อหา: ;

ซ้าย: 50px;

ด้านบน: 0;

ความกว้าง: 50px;

ความสูง: 80px;

ความเป็นมา: #232323;

-moz-Border-Radius: 50px 50px 0 0;

แนวชายแดน: 50px 50px 0 0; -webkit-transform: หมุน (-45deg);-moz-transform: rotate (-45deg);-MS-transform: หมุน (-45Deg);-o-transform: หมุน 45DEG);

แปลง: หมุน (-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: หลังจาก {

ซ้าย: 0; -webkit-transform: หมุน (45deg);-MOZ-transform: หมุน (45DEG);-MS-transform: หมุน (45DEG);-O-Transform: หมุน (45DEG);

แปลง: หมุน (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-gossip {

ความกว้าง: 96px;

ความสูง: 48px;

ความเป็นมา: #F1F1F1;

สีชายแดน: #232323;

สไตล์ชายแดน: ของแข็ง;

ความกว้างของชายแดน: 2px 2px 50px 2px;

แนวชายแดน: 100%;

ตำแหน่ง: ญาติ;

}#CSS3-GOSSIP: ก่อน {

เนื้อหา: ;

ตำแหน่ง: สัมบูรณ์;

ด้านบน: 50%;

ซ้าย: 0;

ความเป็นมา: #F1F1F1;

ชายแดน: 18px Solid #232323;

แนวชายแดน: 100%;

ความกว้าง: 12px;

ความสูง: 12px;

}#CSS3-GOSSIP: หลังจาก {

เนื้อหา: ;

ตำแหน่ง: สัมบูรณ์;

ด้านบน: 50%;

ซ้าย: 50%;

ความเป็นมา: #232323;

ชายแดน: 18px Solid #F1F1F1;

แนวชายแดน: 100%;

ความกว้าง: 12px;

ความสูง: 12px;

-