ایجاد اشکال مثلثی با css بدون هک های مسخره

هر کسی که با css کار میکنه میدونه که اشکال مثلثی شکل رو نمیشه خیلی ساده و راحت ایجاد کرد و برای ایجاد چنین چیزهای احتیاج به روش های مختلف و خسته کننده ایه که بهشون هک css میگن . دوتا از راحل های معمول برای ایجاد چنین اشکالی استفاده از روش Border ها و unicode ها هست .

خوب با استفاده از این دو راحل میشه اشکال مثلثی رو رسم کرد اما هنوز هم روش خیلی جالبی محسوب نمیشه و کد های مارو زشت میکنه و انعطاف پذیری رو هم پایین میاره . برای مثال شما نمیتونید یک شکل مثلثی با css ایجاد کنید و بعد بهش بکگراند image بدید . هر دو راحل بالا فقط توانایی پذیرفتن رنگ ها رو دارند . حالا قصد داریم در این مقاله با روش های اشنا بشیم که ایجاد این اشکال رو خیلی خیلی ساده تر میکنه .

معرفی Clip-path

Clip-path یک قابلیت جالبه که به css اضافه شده و به شما کمک میکنه تا به سادگی بخشی از المنتی که نیاز ندارید رو پنهان کنید و مابقی بخش ها رو به کاربر نمایش بدید . به مثال زیر دقیت کنید . فرض کنید یک div تعریف میکنید و یک طول و عرض و یک تصویر به عنوان بکگراند مشخص میکنید .

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);
}

حالا همین استایل رو به سادگی با استفاده از تابع polygon تبدیل میکنیم به یک مثلث باحال . به کد زیر دقت کنید . 

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);

    /* The points are: centered top, left bottom, right bottom */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

هر چیزی که در داخل محدودی که مشخص کردید باشه نمایش داده میشه و هر چیزی که خارج از محدوده باشه پنهان و با استفاده از این روش نه تنها میتونیم اشکال مثلثی ایجاد کنیم بلکه میتونم اشکال دیگه ای رو هم به سادگی ایجاد کنیم . 

برای استفاده از این روش نیاز به محاسبات کوچیکی دارید که با مشخص کردن نقاط و مقدار میتوانید به المنت مورد نظر به سادگی شکل بدید ولی در کل این روش خیلی بهتر از روش border ها یا کراکترهاست .

پشتیبانی مرورگرها

با باز کردن این صفحه caniuse بصورت کامل پشتیبانی این روش در مرورگرهای مختلف رو میتونید مشاهده کنید . در مرورگر کروم بصورت کامل این روش پشتیبانی میشه و در مرورگر safari احتیاج به استفاده از -webkit- هستش در مرورگر firefox قرار در ورژن ۵۳ این امکان اضافه بشه .