ایجاد مثلث با CSS

ایجاد مثلث با CSS
خیلی وقتا پیش میاد که تو طراحیامون به یک مثلث برای کامل تر شدن کار نیاز داریم. مثل زمانی که میخوایم بالون گفتگو طراحی کنیم یا برای تب های منوی سایت نیاز به مثلث پیدا میکنیم. میتونیم از تصاویر آماده استفاده کنیم اما این راه حرفه ای نیست. چون عکس حجم خیلی بیشتری نسبت به کد داره و در نتیجه دیرتر بارگذاری میشه. در این قسمت میخوام مثلث رو با کدهای CSS به سه روش مختلف طراحی کنیم.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

اول از همه بگم که کل فایل رو در آخر برای دانلود گذاشتم و اینجا مراحل کار رو با عکس توضیح میدم.
برای شروع یه مربع درست میکنیم و بهش 4 border مختلف میدیم. پهناشون باید یکی باشه اما رنگش رو میتونیم تغییر بدیم تا راحت تر عملکردش رو درک کنیم.
.shape{
    width: 100px;
    height: 100px;
    border-left: 100px solid #34495e;
    border-right: 100px solid #e67e22;
    border-bottom: 100px solid #1abc9c;
    border-top: 100px solid #e74c3c;
}

خب حالا باید پهنا و ارتفاع مربع رو انقدر کم کنیم تا شکل زیر حاصل بشه. من ارتفاع و پهنا رو به صفر تغییر دادم.
.shape{
    width: 0px;
    height: 0px;
    border-left: 100px solid #34495e;
    border-right: 100px solid #e67e22;
    border-bottom: 100px solid #1abc9c;
    border-top: 100px solid #e74c3c;
}

حالا فرض می کنیم مثلثی شبیه مثلث نوک مدادی میخوایم. پس دونه دونه رنگ border های دیگه رو به نامرئی یا همون transparent تغییر میدیم. از border-right شروع می کنیم و رنگش رو transparent می کنیم.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #34495e;
    border-right: 100px solid transparent;
    border-bottom: 100px solid #1abc9c;
    border-top: 100px solid #e74c3c;
}

این عمل رو با بقیه border ها هم تکرار می کنیم.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #34495e;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-top: 100px solid transparent;
}

مثلث ما آمادست. فقط کافیه با positioning اونو هرجا که میخوایم استفاده کنیم...
روش دومی هم هست که شبیه همون روش اوله. برای این روش هم اول یه مربع درست میکنیم با هرض و ارتفاع صفر.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #3498db;
    border-right: 100px solid #2ecc71;
    border-bottom: 100px solid #f1c40f;
    border-top: 100px solid #2c3e50;
}

اینجا هم فرض می کنیم که میخوایم مثلث آبی رو ایجاد کنیم. پس مثلث سبز رو یا همون border-right رو پاک می کنیم (تو روش اول رنگش رو transparent می کردیم)
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #3498db;
    border-bottom: 100px solid #f1c40f;
    border-top: 100px solid #2c3e50;
}

حالا دو تا border بالا و پایین رو transparent می کنیم.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #3498db;
    border-bottom: 100px solid transparent;
    border-top: 100px solid transparent;
}
شاید در نگاه اول نتیجه ی دو روش گفته شده یکی باشه اما وقتی با این المان رو inspect کنید میبینید که تو فضای اشغال شده تو صفحه با هم فرق می کنن.
بریم سراغ روش آخر.
مثل روش های قبل یه مربع با عرض و ارتفاع صفر ایجاد کنید.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #e74c3c;
    border-right: 100px solid #e67e22;
    border-bottom: 100px solid #f1c40f;
    border-top: 100px solid #2c3e50;
}
حالا border-top رو پاک کنید.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #e74c3c;
    border-right: 100px solid #e67e22;
    border-bottom: 100px solid #f1c40f;
}
حالا border-right رو هم پاک کنید.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #e74c3c;
    border-bottom: 100px solid #f1c40f;
}
حالا کافیه border-bottom رو transparent کنین.
.shape{
    width: 0;
    height: 0;
    border-left: 100px solid #e74c3c;
    border-bottom: 100px solid transparent;
}
با اعمال تغییرات تو پهنای هر کدوم از border ها , می تونین طرح های جالبی ایجاد کنید...
 
 
 

رضا از سال 87 برنامه نویسی را با زبان های خانواده C شروع کرد و بعد از 4 سال به سمت طراحی و برنامه نویسی تحت وب رفت. وی همزمان با تحصیل در مقطع کارشناسی رشته مهندسی کامپیوتر به امر ترجمه کتاب در حوزه برنامه نویسی مشغول بود که کتاب او در مرحله ویراستاری قرار دارد. به روز بودن و افزایش مستمر اطلاعات شخصی در زمینه وب دغدغه ی اصلی و همیشگی رضاست.

نظرات و سوالات کاربران

ارسال پاسخ حمید
حمید
دوشنبه ۲۵ دی ۱۴۰۲ ۱۳:۱۷
اگه راس میگی به مثلث نهایی border بده ;)
ارسال پاسخ رقیه
رقیه
شنبه ۰۹ بهمن ۱۴۰۰ ۱۳:۴۸
عالی بود
ارسال پاسخ effati
effati
جمعه ۰۸ شهریور ۱۳۹۸ ۱۹:۴۸
ممنون عالی بود
خخخیییلللییی لازم داشتم !!!
ارسال پاسخ امیر
امیر
شنبه ۲۲ اردیبهشت ۱۳۹۷ ۲۱:۴۵
سلام
ممنون از توضیحات خوب شما!! خیلی جالب بود.
ارسال پاسخ فاطمه
فاطمه
پنج شنبه ۲۳ فروردین ۱۳۹۷ ۰۰:۱۲
سلام. خیلی ممنونم. حالا چطور میشه این رو در کنار منو قرار داد... من هر کاری می کنم فقط در بالا و پایین منو در سمت راست قرار میگیره!