شاید به عنوان یک طراح وب سایت برای شما هم پیش آمده باشد که بخواهید شکل‌های مختلفی را با CSS ایجاد و به قسمتی از سایت خود اضافه کنید. جالب است بدانید بیش‌تر شکل‌ها در CSS در اصل یک چهار ضلعی هستند، حتی مثلث! چه قابل تشخیص باشد و چه نباشد، بیش‌تر شکل‌ها از چهار ضلع تشکیل شده‌اند که مقدارهای گوناگونی می‌توانند داشته باشند.
روش‌های مختلفی برای ایجاد شکل‌ها به‌وسیله CSS وجود دارد. پارامترهای گوناگونی که می‌توانند شما را در ساخت شکل دلخواه یاری کنند. مانند:
– Border-radius
– Border
– Transform
– Clip-path
– Box-shadow
Border-radius
با تنظیم این پارامتر شکل‌هایی مانند دایره یا بیضی به راحتی قابل ساخت هستند. Border Radius در اصل میزان خمیدگی یک گوشه را مشخص می‌سازد. این پارامتر می‌تواند مقداری بر اساس پیکسل یا درصد به خود بگیرد.
.circle{
height: 250px;
width: 250px;
border-radius:50%;
background-color:#29DBC7;
}
.oval{
width: 250px;
height: 150px;
border-radius:50%;
background-color:#C70E0E;
}
همان‌طور که گفته شد با این پارامتر می‌توانید میزان انحنای گوشه شکل‌ها را مشخص کنید. به مربع زیر دقت کنید:
.square{
width: 200px;
height: 200px;
border-radius:20%;
background-color:#A11ED3;
}
Border
با تنظیم مناسب این ویژگی که به خطوط 4 سمت شکل مربوط می‌شود، می‌توانید شکل‌های مختلفی مانند مثلث را به سادگی ایجاد کنید. شکل زیر تنها با استفاده از border و بدون در نظر گرفتن width و height (مقدار صفر) طراحی شده است.
#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;
}
رنگ‌های اختصاص داده شده به شما کمک می‌کنند تا قسمت‌های مختلف را به خوبی تشخیص دهید. حذف هر قسمت به وسیله transparent ، شکل متفاوتی را به شما خواهد داد:
ادامه مطلب
