چطوری در صفحه HTML یه مثلث بسازیم ؟

سلام همیشه مشکل ساخت مثلث رو در Html داشتیم و چون تگ خاصی در html یا پراپرتی واضحی برای ساخت مثلث ها نبوده گیج می شدیم!

خب اینجا میخوام ساخت مثلث بدون درد و خونریزی رو به شما یاد بدم ( وای چقدر بانمکم من )

راه اول (تگ img)

استفاده از ایکون های موجود و آپلود کردن کردن اون ها و استفاده شون داخل تگ img هستش

این روش مزیتش سادگی اون در استفاده هستش و برای کسایی که دانش کافی ندارن بهترین روشه

ولی خب از معایبش می شه به غیر قابل ادیت بودن با کد اشاره کرد یعنی اگر شما نیاز داشته باشی مثلث با hover شدن رنگش تغییر کنه دردسر های زیادی رو باید تحمل کنی

راه دوم (استفاده از svg )

خب می شه گفت svg اصلا مشکلات تگ img رو نداره یعنی یه تعدادی از خواص این تگ مثل رنگ قابل ادیته ولی اگر لازم باشه بجای مثلث متساوی الضلاع یه مثلث متساوی الساقین داشته باشیم چی ؟

باید بگم استفاده و کار آمدی زیادی داره ولی یکی از معایبش اینه که اگر قرار باشه نسبت اضلاع رو تغییر بدیم نیاز داریم با ادیتور های عکس مثل photoshop عکس رو تغییر بدیم و تغییر کد های svg واقعا کار سختیه

راه سوم ( استفاده از فونت ایکون ها مثل font awesome )

خب این روش هم همچنان مثل svg هستش با این تفاوت که از قبل طراحی شدن و شما فقط باید نصبش کنید و به پروژه اضافشون کنید

ولی یه مثلث ساده نباید این همه دردسرتون بده مگه نه ؟

راه چهارم ( Css Border )

خب خب این راه یه جورایی جز فنون آخر استاد در css حساب می شه و از یه باگ یه قابلیت در آوردنه

یعنی چی ؟

ببینید فرض کنید یه باکسی داریم با مشخصات زیر :

به عنوان نتیجه خواهی داشت (بردر ها رو با رنگ های متفاوت انتخاب کردم تا از طریق رنگ بردر های بالا و چپ و راست و پایین به راحتی مشخص باشه و قابل تفکیک ) :

حالا می خوام طول و عرض (width & height) باکس رو برابر صفر قرار بدم به عنوان نتیجه خواهیم داشت :

حالا کافیه از 3 جهت دلخواه رنگ border و background-color رو برابر transparent قرار بدید مثلا :

به عنوان نتیجه خواهیم داشت :

روش خوشمزه ای برای ساختن مثلثه مخصوصا واسه اونایی که مثل من سرشون درد می کنه از روش های غیر متعارف به هدفشون برسن :)))

خب حالا فرض کنید بخوام یه دکمه داخل این مثلث هایی که با 4 روش بالا ساختیم بذاریم (یکی نیست بهم بگه چی از جون این مثلث بدبخت می خوای ) خب عملا با 4 روش بالا غیر ممکنه که داخلشون المنت دیگه ای گنجوند ولی یه راه پنجمی هم هست :))))

راه پنجم (Css Clip Path)

از طریق این قابلیت باحال Css می شه اشکال خیلی زیادی رو ساخت و من قصد ندارم دقیقا منطق کارش رو به شما توضیح بدم (برید مطالعه کنید خب به من چه ) فقط قصد دارم بهتون بگم که از طریق این قابلیت می شه یه div ساده رو تبدیل به مثلثی کرد که می شه توش هر المنت HTML دیگه ای تعریف کرد

برای ساختن اشکال مختلف از طریق Clip Path یه سایتی هست که خیلی راحت می تونید باهاش هرچی می خواید بسازید و اصلا نخونید چطوری کار می کنه (مدیونید اگر فکر کنید خودم ازش استفاده می کنم )

ادرس سایت هم اینه : https://bennettfeely.com/clippy/

الان که من دارم این مطلب رو می نویسم باید از خاک‌برسر شکن استفاده کنید تا باز بشه نمی دونم از طرف ما یا اونا بستس ولی می دونم که بستس

از معایب این روش ساختن اشکال اینه که به صورت دیفالت خاصیت overflow برابر با مقدارhidden هستش یعنی اگر شما المنتی دارید که به هر دلیلی بخشیش یا کلش بیرون شکلتون باشه نمایش داده نخواهد شد (حتی شما دوست عزیز ) راه حلی هم نداره مگر با روش های غیر متعارف دیگه شکلتون رو بسازید