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

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

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

با یکی دیگر از آموزشهای سایت آسارایان با عنوان "ایجاد اشکال مختلف هندسی با 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;} 
آخرین بروز رسانیشنبه, 16 خرداد 1394 10:33

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #2 حسین 1394-06-27 09:47
به نقل از بیتا:
سلام ببخشید درقسمت trapezium اشتباها به width:80دادین اگه امکان داره اصلاحش کنید

سلام
با تشکر . به پشتیبانی اعلام شد تا در اولین فرصت اصلاح شود
نقل قول کردن
0 #1 بیتا 1394-06-26 23:40
سلام ببخشید درقسمت trapezium اشتباها به width:80دادین اگه امکان داره اصلاحش کنید
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا