‏ساخت مثلث تو CSS با conic-gradient

کریس کویر تو این پست اعتراف می‌کنه که مدت‌ها conic-gradient() رو یه چیز تزئینی می‌دونست؛ همون ظاهر رنگین‌کمانی شبیه انتخابگر رنگ که خیلی کم به کارت میاد. به گفتهٔ خودش وقتی نظرش عوض شد که دو تا نکته رو کنار هم گذاشت: استاپ‌های رنگی سخت، و اینکه می‌شه مرکز گرادیان رو جابه‌جا کرد. با استاپ سخت خروجی می‌شه نمودار دایره‌ای — که نویسنده می‌گه براش بهتره سراغ SVG بری، چون بک‌گراند تو CSS اصولاً فقط تزئینیه.

ولی وقتی مرکز مخروط رو ببری گوشهٔ باکس، همون استاپ سخت تبدیل به یه مثلث تمیز می‌شه. ایده اینه که نقطهٔ شروع رو از ساعت ۱۲ به ساعت ۳ بچرخونی، مرکز رو بذاری گوشهٔ بالا-چپ، و بعد رنگ‌ها رو با درجه متوقف کنی:

background: conic-gradient(
  /* start in the upper left pointing at 3 o'clock */
  from 0.25turn at 0 0,
  green 0 45deg,
  white 45deg
);

نویسنده خودش ایراد احتمالی خواننده رو جواب می‌ده: آره، همینو با یه linear-gradient() زاویه‌دار هم می‌شه ساخت. ولی حرفش اینه که وقتی موضوع خودِ مثلثه، فکر کردن با درجه طبیعی‌تره و کنترل بیشتری بهت می‌ده — مخصوصاً وقتی تو یه باکس محدودی و زاویهٔ رنگ کمتر از ۴۵ درجه‌ست.

الهام این ایده از نوار ناوبری سایت Studio Heyday اومده که مثلث‌های بزرگ رنگی داره. کویر می‌گه با این روش تونسته زاویه‌ها رو روی هاور تغییر بده و با یه easing از نوع linear() بهشون حالت لرزش بده. آخر پست هم یادآوری می‌کنه که راه‌های دیگه‌ای هم برای مثلث هست: تکنیک کلاسیک بردر روی باکس بی‌ابعاد، clip-path: polygon()، ویژگی تازهٔ border-shape، پالیگان تو SVG، ترسیم روی canvas، یا ترفندهای skew.

نکات کلیدی:

• با استاپ‌های رنگی سخت، conic-gradient() از حالت صرفاً تزئینی درمیاد
• بردن مرکز گرادیان به گوشهٔ باکس، مثلث می‌سازه
• from 0.25turn at 0 0 نقطهٔ شروع رو از ساعت ۱۲ به ساعت ۳ می‌بره
• کنترل با درجه، انیمیت کردن زاویه روی هاور رو ساده می‌کنه
• برای نمودار دایره‌ای تعاملی، SVG انتخاب بهتریه
• راه‌های دیگهٔ ساخت مثلث: بردر، clip-path، border-shape، SVG و canvas