ایجاد اشکال هندسی با CSS را یاد بگیریم! نحوه رسم اشکال در CSS

ایجاد اشکال هندسی با CSS را یاد بگیریم! نحوه رسم اشکال در CSS
آکادمی آی تی
آکادمی آی تی
dots

ایجاد اشکال هندسی با CSS را یاد بگیریم! نحوه رسم اشکال در CSS

زمان مورد نیاز برای مطالعه 5 دقیقه

رسم اشکال گوناگون با استفاده از CSS به سادگی هر چه تمام تر! برای ایجاد اشکال هندسی با CSS روش های متفاوتی وجود دارد و پارامترهای گوناگونی در این رسم دخیل هستند.

دپارتمان ‌ها: آموزش طراحی سایت
1398/08/04
12,699 بازدید

با استفاده از CSS می توان شکل های مختلف و جذابی را در وب ها ایجاد کرد. شاید از خودتان بپرسید این شکل ها را چگونه می توان طراحی کرد؟ روش‌های مختلفی برای رسم اشکال در CSS وجود دارد. پارامترهای گوناگونی وجود دارند که می‌توانند شما را در ساخت شکل دلخواه یاری کنند مانند:

  • Border-radius
  • Border
  • Transform
  • Clip-path                    
  • Box-shadow

 


کار با Border-radius:

ایجاد اشکال با css

 

circle{ height: 250px; width: 250px; border-radius:50%; background-color:#29DBC7; }

کار با border-radius

 

oval{ width: 250px; height: 150px; border-radius:50%; background-color:#C70E0E;}


با تنظیم این پارامتر در CSS شکل‌هایی مانند دایره یا بیضی به راحتی قابل ساخت هستند Border Radius در اصل میزان خمیدگی یک گوشه را مشخص می‌سازد. این پارامتر می‌تواند مقداری بر اساس پیکسل یا درصد به خود بگیرد.
همان‌طور که گفته شد با این پارامتر می‌توانید میزان انحنای گوشه شکل‌ها را مشخص کنید.

:به مربع زیر دقت کنید

میزان انحنای گوشه شکل‌ها

 

square{ width: 200px; height: 200px; border-radius:20%; background-color:#A11ED3;}

 


کار با Borderها:

#square{ width: 0; height: 0; border-top:100px solid red; border-right:100px solid orange;
 border-bottom:100px solid green; border-left:100px solid blue; }

 

.KeepTopBottom{ width: 0; height: 0; border-top:100px solid red; border-right:100px solid transparent;
 border-bottom:100px solid green; border-left:100px solid transparent; }
 
.KeepRightLeft{ width: 0; height: 0; border-top:100px solid
 transparent; border-right:100px solid orange; border-bottom:100px solid transparent; border-left:100px solid blue; }
 
KeepRightLeft{ width: 0; height: 0; border-top:100px solid transparent;
 border-right:100px solid orange; border-bottom:100px solid transparent; border-left:100px solid blue;}


با تنظیم مناسب این ویژگی که به خطوط 4 سمت شکل مربوط می‌شود، می‌توانید شکل‌های مختلفی مانند مثلث را به سادگی ایجاد کنید. شکل زیر تنها با استفاده از border و بدون در نظر گرفتن width و height (مقدار صفر) طراحی شده است.

طراحی شکل با borderها

 

رنگ‌های اختصاص داده شده به شما کمک می‌کنند تا قسمت‌های مختلف را به خوبی تشخیص دهید. حذف هر قسمت به وسیله transparent، شکل‌ متفاوتی را به شما خواهد داد:

 حذف قسمت ها به وسیله transparent

 

حذف قسمت ها به وسیله transparent

 

می‌توانید فقط یک مثلث را نگه دارید تا مثلا از آن به عنوان آیکون اشاره استفاده کنید:

حذف قسمت ها به وسیله transparent

 

جالب است که با این روش حتی می‌توانید یک ذوزنقه رسم کنید.

 

حذف قسمت ها به وسیله transparent

 

trapezium{ width: 150px; height: 0; border-bottom:150px solid #7C0F0F; border-right:60px solid transparent;
 border-left:60px solid transparent; }

 


کار با Transform:

diamond{ width: 150px; height: 150px; background-color: #0AECD0; transform: rotate(45deg); margin-left:40px; 
margin-top: 40px;}


از قابلیت های موجود در CSS چرخاندن است اگر برای ایجاد شکل دلخواه خود نیاز به چرخاندن شکل دیگری داشتید، ویژگی transform با حالت rotate سودمند خواهد بود مثلا با چرخاندن یک مربع، لوزی تشکیل می‌شود:

کار با Transform

 

حالت skew نوعی انحراف در شکل ایجاد می‌کند.

کار با Transform و حالت skew

 

parallelogram{ width: 150px; height: 150px; transform: skew(30deg); background-color: #59078F; margin-left:40px; }


کار با Clip-path:
 

marker{ width: 400px; height: 150px; background-color:#F57709; background-size:cover;
 -webkit-clip-path: polygon(0% 20%,60% 20%,60% 0%,100% 50%,60% 100%,60% 80%,0% 80%); }
 
star{ width: 250px; height: 250px; background-color:#A80F43; background-size:cover; 
-webkit-clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }


در CSS می توان اشکال متنوع‌تری با استفاده از این ویژگی به همراه سه تابع ()inset() ،polygon و ()ellipse ایجاد کرد. اعداد ورودی نشان‌دهنده هر گوشه شکل هستند. مثلا برای مثلث 3 گوشه و در نتیجه سه ورودی نیاز است.

کار با Clip-path در css

کار با Clip-path در css

 

برای مشاهده شکل‌های متنوع قابل ساخت با CSS و رهایی از محاسبه مقدار ورودی مناسب تابع‌های clip-path می‌توانید به سایت bennettfeely مراجعه کنید.

 

کاربا Box-shadow:
 

moon{ width: 250px; height: 250px; border-radius:50%; box-shadow: 45px 45px 0 0 #32172C; }


همراه گرامی آکادمی آی تی


در این مقاله سعی کردیم تا چند ویژگی سودمند برای ایجاد شکل‌های دلخواه به‌وسیله CSS را به شما معرفی کنیم. تعداد شکل‌های قابل ساخت به‌ وسیله CSS به قدری زیاد است که در یک مقاله نمی‌گنجد.

همان‌طور که می‌دانید این ویژگی در CSS برای اضافه کردن سایه به شکل‌ها استفاده می‌شود. آیا تا به حال به استفاده از سایه شکل (box-shadow) برای ایجاد یک شکل فکر کرده‌اید؟

کار با Box-shadow در css