ارزدیجیتال
حراجی دامنه های ویژهمشاهده





وینگو مارکت
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

ساخت اشکال هندسی مختلف با استفاده از CSS3

CSS , HTML5 , اسکریپت ها

قطعا این یک پست فوق العاده جالب و پربازدید از نظر شما توسعه دهندگان وب سایت خواهد شد .

اگر شما هم فکر میکنید که به وسیله css میتوان فقط چند شکل از جمله مربع , مستطیل , دایره و بیضی را ساخت , سخت در اشتباهید .

در این پست از سایت بیست اسکریپت , قصد دارم آموزشی را قرار دهم که با استفاده از ترفند هایی در css3 , اشکال بسیار زیادتری را در صفحات وب سایت خود ایجاد کنید .

ساخت اشکال هندسی مختلف با استفاده از CSS3

 

دایره :

#vms {
    width: 140px;
    height: 140px;
    background: red;
    border-radius: 70px;
}

  مربع : 

#vms {
    width: 100px;
    height: 100px; 
    background: red; 
}

مستطیل :

#vms {
    width: 150px;
    height: 75px; 
    background: red; 
}

بیضی :

#vms {
    width: 200px;
    height: 100px; 
    background: red;
    border-radius: 100px / 50px;
}

 مثلث رو به بالا :

#vms {
    width: 0;
    height: 0;
    border-bottom: 120px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent; 
}

مثبث رو به پایین :

#vms { 
    width: 0;
    height: 0;
    border-top: 80px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

 مثلث رو به راست :

#vms {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

 چهار ضلعی غیر منظم :

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

 الماس :

#vms{
    width: 80px;
    height: 80px;
    background: red;
    margin: 3px 0 0 30px;
    /* 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: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

متوازی الاضلاع :

#vms {
    width: 130px; 
    height: 75px;
    background: red;
    /* Skew */
    -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg);
    transform: skew(20deg);
}

 دوازده نقطه ستاره :

#vms {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
}
#vms:before {
    height: 100px;
    width: 100px;
    background: red;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
#vms:after {
    height: 100px;
    width: 100px;
    background: red;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

 شش نقطه ستاره :

#vms {
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 80px solid red;
}
#vms:after {
    content:"";
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent; 
    border-top: 80px solid red;
    margin: 30px 0 0 -50px;
}

هشت وجهی :

#vms {
    width: 100px; 
    height: 100px; 
    background: red;
}
#vms:before {
    height: 0;
    width: 40px;
    content:"";
    position: absolute;
    border-bottom: 30px solid red;
    border-left: 30px solid white;
    border-right: 30px solid white;
}
#vms:after {
    height: 0;
    width: 40px;
    content:"";
    position: absolute; 
    border-top: 30px solid red;
    border-left: 30px solid white; 
    border-right: 30px solid white;
    margin: 70px 0 0 0;
}

 کادر سخنگو : 

#vms {
    width: 120px; 
    height: 80px; 
    background: red;
    position: absolute;
    border-radius: 10px;
}
#vms:before {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid red;
    border-bottom: 13px solid transparent;
    margin: 13px 0 0 -25px;
}

 تخم مرغ :

#vms {
    display:block;
    width:126px;
    height:180px;
    background-color:red;
    -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

ساخت کارکتر بازی pacman :

#vms {
    width: 0px;
    height: 0px;
    border-right: 60px solid transparent;
    border-top: 60px solid red;	
    border-left: 60px solid red;
    border-bottom: 60px solid red;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

دایره 2 رنگ :

#vms {
    width: 0;
    height: 0;
    border-bottom: 60px solid black;
    border-top: 60px solid black;
    border-left: 60px solid red;
    border-right: 60px solid red;
    border-radius: 60px;
}

ساخت یک قلب :

#vms { 
    position: relative;
}
#vms:before, #vms:after {
    position: absolute;
    content: "";
    left: 70px; top: 0;
    width: 70px;
    height: 115px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#vms:after { 
    left: 0; 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
}

توجه 1 : این اندازه ها و رنگ ها به صورت پیش فرض تنظیم شده اند و تمامی آنها را با توجه به قوانین خاص هر شکل میتوانید تغییر نمایید

توجه 2 : در بالا برای همه ی css ها از آی دی vms استفاده شده که طبیعتا میتوانید آن را تغییر دهید . ضمنا برای ساخت کد html این کد ها ( نمایش شکل ها ) باید به روش زیر در داخل تگ body عمل نمایید.

<div id="vms"></div>

این محتوا چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 3.4 / 5. تعداد رای : 8

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 5 CSS , HTML5 , اسکریپت ها
لینک کوتاه مطلب : https://www.20script.ir/?p=13336
کلمات کلیدی پست :
مطالب مرتبط
11,892افزونه سفارشی سازی استایل ابزارک های وردپرس Widget CSS Classes تاریخ : 2016/02/28
12,951ساعت بسیار زیبای CSS3 تاریخ : 2013/11/13
38,320حل مشکل عدم نمایش فونت فارسی در وب تاریخ : 2014/09/1
14,108ایجاد حالت های انیمیشنی متحرک با افزونه وردپرس Animate It تاریخ : 2019/06/23
14,098رابط کاربری iMessage در 9 IOS با جی کوئری تاریخ : 2016/04/21
13,524فرم ورود جدید و بسیار زیبا CSS3 تاریخ : 2013/11/15
15,156اسکریپت پشتیبان گیری وب سایت SmartBackup نسخه 1.1.2 تاریخ : 2016/08/15
10,448فرم ورود بسیار حرفه ای و زیبا CSS3 تاریخ : 2013/11/15
13,610فرم ورود به سایت بسیار زیبا و کاربردی تاریخ : 2013/10/22
13,830اسکریپت ایجاد افکت و انیمیشن در تصاویر سایت tFigure تاریخ : 2014/08/19
13,882اسکریپت ساخت صفحات در دست ساخت Enexero Coming Soon تاریخ : 2017/11/14
13,799افزونه وردپرس امتیاز دهی Taqyeem فارسی تاریخ : 2016/12/28
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب