Login to your account

Username *
Password *
Remember Me

Create an account

Fields marked with an asterisk (*) are required.
Name *
Username *
Password *
Verify password *
Email *
Verify email *
Captcha *
Reload Captcha

ایجاد اشکال مختلف هندسی با Css3 مطلب ویژه

By خرداد 16, 1394 8512 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

با یکی دیگر از آموزشهای سایت آسارایان با عنوان "ایجاد اشکال مختلف هندسی با Css3"در خدمت شما هستم .در این بخش آموزشی با استفاده از کدهای Css3 یاد می گیرید که چگونه یکسری از اشکال هندسی را ترسیم کنید .
منبع اصلی این آموزش به زبان انگلیسی بوده که می توانید در صورت نیاز از طریق این لینک از اشکال دیگر آن استفاده کنید .

Square 

 

 

#square {
   width:140px;
   height:140px;
   background: blue;

 

 

 

 Circle

#circle {
   width:140px;
   height:140px;
   background: blue;
   -moz-border-radius:70px;
   -webkit-border-radius:70px;
   border-radius:70px;} 

 

 

 

 Oval

  #oval {
   width:200px;
   height:100px;
   background: blue;
   -moz-border-radius:100px/50px;
   -webkit-border-radius:100px/50px;
   border-radius:100px/50px;}

 

 

Up Triangle   #up-triangle {
   width:0;
   height:0;
   border-bottom:120px solid blue;
   border-left:60px solid transparent;
   border-right:60px solid transparent;
}
Down Triangle #down-triangle {
   width:0;
   height:0;
   border-top:120px solid blue;
   border-left:60px solid transparent;
   border-right:60px solid transparent;
Left Triangle  #left-triangle {
   width:0;
   height:0;
   border-right:100px solid blue;
   border-top:50px solid transparent;
   border-bottom:50px solid transparent;} 

 

Parallelogram

#parallelogram {
   width:130px;
   height:75px;
   background: blue;
   /* Skew */
   -webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
   -o-transform: skew(20deg);
   transform: skew(20deg);}
Rectangle  #rectangle {
   width:140px;
   height:80px;
   background: blue;} 

Triangle Top Left

#triangle-topleft {
   width:0;
   height:0;
   border-top:100px solid blue;
   border-right:100px solid transparent;
}

Triangle Top Right

#triangle-topleft {
   width:0;
   height:0;
   border-top:100px solid blue;
   border-right:100px solid transparent;
}

Triangle Bottom Left

#triangle-bottomleft {
   width:0;
   height:0;
   border-bottom:100px solid blue;
   border-right:100px solid transparent;
}

Trapezium

#trapezium {
   height:0;
   width:80px;
   border-bottom:80px solid blue;
   border-left:40px solid transparent;
   border-right:40px solid transparent;}

Diamond

#diamond {
   width:80px;
   height:80px;
   background: blue;
   margin:3px0030px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin:0100%;
   -moz-transform-origin:0100%;
   -ms-transform-origin:0100%;
   -o-transform-origin:0100%;
   transform-origin:0100%;}
Right Triangle  #right-triangle {
   width:0;
   height:0;
   border-left:100px solid blue;
   border-top:50px solid transparent;
   border-bottom:50px solid transparent;} 
این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در شنبه, 16 خرداد 1394 ساعت 10:33
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz

Please publish modules in offcanvas position.

تک وب دیزاین-قالب فارسی جوملا