آموزش ساخت مثلث در CSS + معرفی سایت های مثلث ساز

تا حالا شده بخوای با css مثلث درست کنی ولی به مشکل بر بخوری؟ ما توی این مقاله قراره بهت یاد بدیم چجوری هر مثلثی که دلت خواست با css درست کنی!

البته اگه حال نداری کد بزنی، برو ته مقاله رو بخون، من کارت رو راحت کردم 😉

روش اول: استفاده از Border

خب، بریم سراغ روش اول که خیلی معروفه و همه جا ازش استفاده می‌کنن. این روش در اصل با border کار می‌کنه و چیز خیلی خاصی نداره، یکم باهاش کلنجار بری قلقش دستت میاد.

مثلاً اگه خواستی یه مثلث رو به‌ بالا با CSS درست کنی، فقط کافیه از کد زیر استفاده کنی:

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #3498db;
}

حالا اگه بخوای مثلثت رو به سمت راست باشه، فقط کافیه از کد زیر استفاده کنی:

.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid #e74c3c;
}

روش دوم: استفاده از clip-path

clip-path یه قابلیت جذاب تو CSS هست که اجازه می‌ده یه بخش خاص از المنت رو نشون بدی و بقیه‌شو ببری. مثلاً یه مثلث بسازی! 😎

.triangle-clip {
    width: 100px;
    height: 100px;
    background: #2ecc71;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

اینجا با polygon تعیین کردیم که سه نقطه‌ی رأس مثلث کجا باشه. این روش خیلی انعطاف‌پذیره و می‌تونی هر مثلثی خواستی با سایز دلخواهت درست کنی.

سایت های مثلث ساز !

حوصله نداری بشینی کد بنویسی؟عب نداره! 😃 یه سری سایت آنلاین وجود دارن که تو سایز و شکل مثلث دلخواهت رو بهشون میگی، بهت کدش رو میدن میتونی از سایت های زیر استفاده کنی:

• CSS Triangle Generator
• CSS Triangle Tool

خب، برای مثال من یه اسکرین شات از سایت دوم گذاشتم و دو سه قسمتش رو بررسی کردم که البته چیز خاصی هم نداره و شما خودت وارد سایت بشی کاملا متوجه میشی چی به چیه

1. تو این قسمت فقط مشخص میکنی که مثلث به چه سمتی باشه
2. تو این قسمت هم رنگ و سایز (طول و عرض) مثلث رو انتخاب می کنی
3. اینجا هم کد نهایی رو بهت میده و میتونی بزاری تو CSS و ازش استفاده کنی

لطفا نظرت رو با ما share کن و هر سوالی داشتی، تو کامنت ها بپرس