ایجاد مثلث با 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 سال به سمت طراحی و برنامه نویسی تحت وب رفت. وی همزمان با تحصیل در مقطع کارشناسی رشته مهندسی کامپیوتر به امر ترجمه کتاب در حوزه برنامه نویسی مشغول بود که کتاب او در مرحله ویراستاری قرار دارد. به روز بودن و افزایش مستمر اطلاعات شخصی در زمینه وب دغدغه ی اصلی و همیشگی رضاست.