آذر 24, 1398

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

    By خرداد 16, 1394 8374 دیدگاه (2)

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

    با یکی دیگر از آموزشهای سایت آسارایان با عنوان "ایجاد اشکال مختلف هندسی با 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

    نوشتن دیدگاه

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

    دیدگاه‌ها   

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

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

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

    «
    • 1
    • 2
    • 3
    »

    گالری پست

    چطور می توانید متوجه شوید که در اندروید چه برنامه ای را بیش از همه استفاده می کنید ؟

    چطور می توانید وضعیت فعالیت خود را در اینستاگرام پنهان کنید

    موس Trackball چیست و چرا شما نیاز به موس Trackball دارید ؟

    ارسال فکس از طریق تلفن همراه

    چطور داریور کارت گرافیک خود را برای بهتر شدن عملکرد در بازی بروز رسانی کنیم

    چطور فایل های خراب در ویندوز را درست کنیم

    تماس از طریق WiFi calling و روش فعال کردن آن در گوشیهای اندروید

    چگونه پسورد آنلاین قوی بسازیم که به سختی هک شود ؟

    قبل از فعال کردن تایید دو مرحله ای این مقاله را بخوانید

    © 2018 Your Company. All Rights Reserved. Designed By Tripples

    Please publish modules in offcanvas position.

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