CSS3 圆形
#css3-circle {
العرض: 150 بكسل ؛
الارتفاع: 150 بكسل ؛
الحدود الحدودية: 50 ٪ ؛
خلفية اللون: #232323 ؛}
CSS3 椭圆形
#css3-elipse {
العرض: 200 بكسل ؛
الارتفاع: 100px ؛
الحدود الحدودية: 50 ٪ ؛
خلفية اللون: #232323 ؛}
CSS3 三角形
#css3-triangle {
العرض: 0 ؛
الارتفاع: 0 ؛
الحدود اليسرى: 100 بكسل شفاف صلبة.
الحدود اليمين: 100 بكسل شفاف صلب ؛
Border-Bottom: 150 بكسل Solid #232323 ؛}
CSS3 平行四边形
#css3-paralalogram {
العرض: 200 بكسل ؛
الارتفاع: 100px ؛
الخلفية: #232323 ؛
-webkit-transform: skew (-45deg) ؛-Moz-transform: skew (-45deg) ؛-o transform: skew (-45deg) ؛
التحويل: منحرفة (-45deg) ؛
}
CSS3 梯形
#css3 trapezoid {
العرض: 100px ؛
الارتفاع: 0 ؛
Border-Bottom: 100px Solid #232323 ؛
الحدود اليسرى: 50 بكسل شفاف صلبة.
اليمين الحدودي: 50 بكسل شفاف صلب ؛
}
CSS3 六角星
#CSS3-SIX-Star {
العرض: 0 ؛
الارتفاع: 0 ؛
الموقف: قريب
Border-Bottom: 100px Solid #232323 ؛
الحدود اليسرى: 50 بكسل شفاف صلبة.
اليمين الحدودي: 50 بكسل شفاف صلب ؛
}#CSS3-SIX-STAR: بعد {
محتوى: ؛
العرض: 0 ؛
الارتفاع: 0 ؛
الموقف: مطلق ؛
اليسار: -50 بكسل ؛
أعلى: 35 بكسل ؛
أعلى الحدود: 100 بكسل Solid #232323 ؛
الحدود اليسرى: 50 بكسل شفاف صلبة.
اليمين الحدودي: 50 بكسل شفاف صلب ؛
}
CSS3 五角星
#css3-five-star {
العرض: 0px ؛
الارتفاع: 0px ؛
الهامش: 50px 0 ؛
الموقف: قريب
العرض: كتلة ؛
اللون: #232323 ؛
الحدود اليمين: 100 بكسل شفاف صلب ؛
Border-Bottom: 70 بكسل Solid #232323 ؛
الحدود اليسرى: 100 بكسل شفاف صلبة ؛ -Moz-transform: تدوير (35deg) ؛-WebKit-Transform: Rotate (35deg) ؛-MS-Transform: Rotate (35deg) ؛-O-transform: Rotate (35deg) ؛
}#css3-five-star: قبل {
Border-Bottom: 80px Solid #232323 ؛؛
الحدود اليسرى: 30 بكسل شفاف صلب ؛
اليمين الحدودي: 30 بكسل شفاف صلب ؛
الموقف: مطلق ؛
الارتفاع: 0 ؛
العرض: 0 ؛
أعلى: -45 بكسل ؛
اليسار: -63px ؛
العرض: كتلة ؛
المحتوى: '' ؛ -webkit-transform: rotate (-35deg) ؛-moz-transform: rotate (-35deg) ؛-ms-transform: rotate (-35deg) ؛-o-transform: rotate (-35deg) ؛
}#css3-five-star: بعد {
الموقف: مطلق ؛
العرض: كتلة ؛
اللون: #232323 ؛
أعلى: 3 بكسل ؛
اليسار: -105px ؛
العرض: 0px ؛
الارتفاع: 0px ؛
الحدود اليمين: 100 بكسل شفاف صلب ؛
Border-Bottom: 70 بكسل Solid #232323 ؛
الحدود اليسرى: 100 بكسل شفاف صلب ؛ -webkit-transform: تدوير (-70deg) ؛-Moz-transform: Rotate (-70deg) ؛-MS-Transform: Rotate (-70deg) ؛-O-transform: rotate (-70deg (-70deg ) ؛
محتوى: ''؛
}
CSS3 五边形
#css3-pentagon {
الموقف: قريب
العرض: 54px ؛
عرض الحدود: 50px 18px 0 ؛
على غرار الحدود: صلبة.
لون الحدود: #232323 شفاف ؛} #css3-pentagon: قبل {
محتوى: ؛
الموقف: مطلق ؛
الارتفاع: 0 ؛
العرض: 0 ؛
أعلى: -85px ؛
اليسار: -18 بكسل ؛
عرض الحدود: 0 45px 35px ؛
على غرار الحدود: صلبة.
لون الحدود: شفاف شفاف #232323 ؛}
CSS3 六边形
#CSS3-Hexagon {
العرض: 100px ؛
الارتفاع: 55 بكسل ؛
الخلفية: #232323 ؛
الموقف: قريب
}#CSS3-Hexagon: قبل {
محتوى: ؛
الموقف: مطلق ؛
أعلى: -25 بكسل ؛
اليسار: 0 ؛
العرض: 0 ؛
الارتفاع: 0 ؛
الحدود اليسرى: 50 بكسل شفاف صلبة.
اليمين الحدودي: 50 بكسل شفاف صلب ؛
Border-Bottom: 25px Solid #232323 ؛ }#CSS3-Hexagon: بعد {
محتوى: ؛
الموقف: مطلق ؛
أسفل: -25 بكسل ؛
اليسار: 0 ؛
العرض: 0 ؛
الارتفاع: 0 ؛
الحدود اليسرى: 50 بكسل شفاف صلبة.
اليمين الحدودي: 50 بكسل شفاف صلب ؛
أعلى الحدود: 25 بكسل الصلبة #232323 ؛ }
CSS3 心形
#CSS3 Heart {
الموقف: قريب
العرض: 100px ؛
الارتفاع: 90 بكسل ؛
} #css3-heart: قبل ، #css3 heart: بعد {
الموقف: مطلق ؛
محتوى: ؛
اليسار: 50 بكسل ؛
أعلى: 0 ؛
العرض: 50 بكسل ؛
الارتفاع: 80 بكسل ؛
الخلفية: #232323 ؛
-Moz-Border-Radius: 50px 50px 0 0 ؛
الحدود الحدودية: 50px 50px 0 0 ؛ -webkit-transform: rotate (-45deg) ؛-moz-transform: rotate (-45deg) ؛-ms-transform: rotate (-45deg) ؛-o transform: rotate (- 45deg) ؛
التحويل: تدوير (-45deg) ؛-WebKit-transform-Origin: 0 100 ٪ ؛-Moz-Transform-Origin: 0 100 ٪ ؛-MS-Transform-Origin: 0 100 ٪ ؛-O-Transform-Origin: 0 100 ٪ ؛
التحويل الأولي: 0 100 ٪ ؛
}#css3 heart: بعد {
اليسار: 0 ؛ -webkit-transform: تدوير (45deg) ؛-moz-transform: rotate (45deg) ؛-ms-transform: rotate (45deg) ؛-O-transform: rotate (45deg) ؛
التحويل: تدوير (45deg) ؛-WebKit-transform-Origin: 100 ٪ 100 ٪ ؛-Moz-transform-Origin: 100 ٪ 100 ٪ ؛-MS-Transform-Origin: 100 ٪ 100 ٪ ؛-O-Transform-Origin: 100 ٪ 100 ٪ ؛
التحويل الأولي: 100 ٪ 100 ٪ ؛
}
CSS3 八卦
#CSS3-GOSSIP {
العرض: 96 بكسل ؛
الارتفاع: 48 بكسل ؛
الخلفية: #f1f1f1 ؛
بلون الحدود: #232323 ؛
على غرار الحدود: صلبة.
عرض الحدود: 2px 2px 50px 2px ؛
الحدود الحدودية: 100 ٪ ؛
الموقف: قريب
}#css3-gossip: قبل {
محتوى: ؛
الموقف: مطلق ؛
أعلى: 50 ٪ ؛
اليسار: 0 ؛
الخلفية: #f1f1f1 ؛
الحدود: 18 بكسل Solid #232323 ؛
الحدود الحدودية: 100 ٪ ؛
العرض: 12 بكسل ؛
الارتفاع: 12 بكسل ؛
}#css3-gossip: بعد {
محتوى: ؛
الموقف: مطلق ؛
أعلى: 50 ٪ ؛
اليسار: 50 ٪ ؛
الخلفية: #232323 ؛
الحدود: 18 بكسل Solid #F1f1f1 ؛
الحدود الحدودية: 100 ٪ ؛
العرض: 12 بكسل ؛
الارتفاع: 12 بكسل ؛
}