ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 16 خرداد, 1394 8646 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
تک وب دیزاین-قالب فارسی جوملا