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

باید اعتراف کنم این راه حل ها بسیار زیرکانه هستند ولی با این حال روش های ترسناکی هم هستند و کدهای ما را زشت و کم انعطاف می کنند.برای نمونه ، در این روش ها ما نمی توانیم مثلثی با تصویر پس زمینه داشته باشیم زیرا border و کاراکترها فقط می توانند یک رنگ را قبول کنند و نه تصویر را.

معرفی clip-path

Clip-path یکی از دستورات جدید اضافه شده به css است که به ما اجازه می دهد بخشی از یک عنصر را نمایش دهیم و بقیه آن را مخفی کنیم.در ادامه نحوه کار آن را می بینیم.

برای اینکه بتوانیم یک مثلث ایجاد کنیم باید از تابع polygon() استفاده کنیم.این تابع نیاز به پارامترهای ورودی برای مشخص کردن شکل مورد نظرمان (مثلث) است تا بر اساس این مختصات ، یک ماسک روی بخش بگذارد و نقاطی که خارج از محدوده هستند نیز مخفی کند.هر مثلث = 3 نقطه ! می توانید مقادیر زیر را تغییر داده و نتیجه تغییرات را بررسی کنید.کد css زیر رو روی یک div اعمال می کنیم:

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%);
}

در کد بالا برای سه نقطه مورد نظر در محور مختصات x و y مقداری بین 0 تا 100% تعیین کردیم .نتیجه کد بالا مثل این شکل خواهد بود:

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

دستور clip-path می تونه کارهایی فراتر از کشیدن مثلث انجام بده و برای اطلاعات بیشتر می توانید به سایت های زیر سری بزنید:

• Clip-path on MDN – here
• In-depth tutorial for clip-path on Codrops – here
• Clippy, a clip-path generator – here

برای اطلاع در مورد پشتیبانی مرورگرها از این دستور می تونید سری به caniuse بزنید!