طراحی اشکال مختلف با CSS
سه شنبه, ۱۹ دی ۱۳۹۱، ۰۹:۳۹ ب.ظ
در این مطلب میخوام بهتون نشون بدم چطوری توسط CSS3
شکل های مختلف مثل دایره ، مربع ، مثلث ، ذوزنقه و ..... طراحی کنید
مربع :
کد:
#square {
width: 100px;
height: 100px;
background: #D06D38;
}
نمونه :
مستطیل :
کد:
#rectangle {
width: 200px;
height: 100px;
background: #8D8B3E;
}
نمونه :
دایره :
کد:
#circle {
width: 100px;
height: 100px;
background: #4B9748;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
نمونه :
بیضی :
کد:
#oval {
width: 200px;
height: 100px;
background: #489782;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
نمونه :
مثلث :
کد:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #5580A9;
}
نمونه :
مثلث برعکس :
کد:
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #705AA4;
}
نمونه :
مثلث از چپ:
کد:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #995AA4;
border-bottom: 50px solid transparent;
}
نمونه :
مثلث از راست:
کد:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #B64883;
border-bottom: 50px solid transparent;
}
نمونه :
مثلث قائم الزاویه:
کد:
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #B6484C;
border-right: 100px solid transparent;
}
نمونه :
مثلث قائم الزاویه:
کد:
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #95696B;
border-left: 100px solid transparent;
}
نمونه :
مثلث قائم الزاویه:
کد:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid #699583;
border-right: 100px solid transparent;
}
نمونه :
مثلث قائم الزاویه:
کد:
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #78B747;
border-left: 100px solid transparent;
}
نمونه :
متوازی الاضلاع:
کد:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #7F7F7F;
}
نمونه :
ذوزنقه:
کد:
#trapezoid {
border-bottom: 100px solid #1E8F87;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
نمونه :
techforum4u
