ساخت مثلث CSS
ساخت مثلث CSS با ترفند border در هشت جهت، با پیشنمایش زنده و خروجی clip-path
چرا border مثلث میسازد؟
عنصری با width:0 و height:0 هیچ محتوایی ندارد، پس چهار حاشیهاش در یک نقطه به هم میرسند و مرورگر هرکدام را به شکل یک گوه رسم میکند.
کافی است سه حاشیه را transparent کنید تا فقط یک مثلث باقی بماند. قاعده مثلث برابر مجموع ضخامت دو حاشیه مجاور و ارتفاعش برابر ضخامت خود همان حاشیه است.
به همین دلیل برای مثلث رو به بالا، حاشیه چپ و راست دقیقاً نصف عرض تنظیم میشود و کادر نهایی عنصر همان عرض در ارتفاع میشود.
نکته راستبهچپ
border-left و border-right فیزیکی هستند و با راستبهچپ شدن صفحه جابهجا نمیشوند؛ مثلثی که در چیدمان لاتین به راست اشاره میکند، در صفحه فارسی هم به همان سمت راست میماند.
اگر مثلث نقش فلش «بعدی» یا نشانگر بازشو را دارد، گزینه خصوصیتهای منطقی را روشن کنید تا خروجی با border-inline-start و border-inline-end ساخته شود و خودش با جهت متن قرینه شود. برای فلش تولتیپ که به لبهای ثابت چسبیده، همان حالت فیزیکی درست است.
دربارهی ساخت مثلث CSS
مثلث CSS در واقع شکل نیست؛ یکی از چهار حاشیهٔ یک عنصر صفر در صفر است. وقتی width و height صفر باشند، چهار حاشیه در یک نقطه به هم میرسند و مرورگر هرکدام را به صورت یک گوهٔ مثلثی رسم میکند؛ سهتا را transparent کنید، یکی باقی میماند. به همین دلیل برای مثلث رو به بالا با عرض ۸۰ پیکسل باید حاشیهٔ چپ و راست را ۴۰ پیکسل بدهید، نه ۸۰.
راهنمای استفاده از ساخت مثلث CSS
- 1
جهت را از شبکهٔ سه در سه انتخاب کنید؛ چهار جهت اصلی و چهار مثلث گوشهای در دسترس است.
- 2
عرض و ارتفاع را با اسلایدر یا کادر عددی تنظیم کنید، یا قفل تناسب را بزنید تا مثلث متساویالاضلاع (و در حالت گوشهای، ۴۵ درجه) شود.
- 3
رنگ را از انتخابگر بردارید یا کد هگز را مستقیم تایپ کنید و در صورت نیاز نام کلاس خروجی را عوض کنید.
- 4
اگر مثلث باید در صفحهٔ راستبهچپ قرینه شود، خصوصیتهای منطقی را روشن کنید.
- 5
کد روش border یا نسخهٔ clip-path کنارش را کپی کنید.
پرسشهای متداول
چرا مثلث CSS من نمایش داده نمیشود؟
تقریباً همیشه به این دلیل که عنصر هنوز width و height دارد. اندازهٔ مثلث فقط از ضخامت حاشیهها میآید؛ اگر عنصر ابعاد واقعی داشته باشد، به جای مثلث یک کادر با گوشههای اریب میبینید. ضمناً حاشیههای استفادهنشده باید transparent باشند، نه حذفشده.
میشود به مثلث border گرادیان یا کادر داد؟
نه. این مثلث با رنگ حاشیه رنگ میگیرد، پس فقط یک رنگ ثابت میپذیرد و border-radius هم رویش اثری ندارد. برای گرادیان یا تصویر از خروجی clip-path همین ابزار استفاده کنید؛ برای مثلث خطدار باید یک مثلث کمی بزرگتر را پشت مثلث کوچکتر بگذارید.
مثلث در صفحهٔ فارسی برعکس میشود؟
با خروجی پیشفرض نه، چون border-left و border-right فیزیکیاند و هرگز جابهجا نمیشوند. اگر میخواهید فلش با جهت متن بچرخد، گزینهٔ خصوصیتهای منطقی را روشن کنید تا border-inline-start و border-inline-end تولید شود.
محدودیت این ابزار چیست؟
فقط مثلثهای تکرنگ تا ۳۰۰ پیکسل و در همان هشت جهت ثابت تولید میکند. زاویهٔ دلخواه، نوک گِرد و مثلث چرخیده خارج از دامنهٔ کار آن است؛ برای اینها باید سراغ SVG یا transform بروید.