مقدمه

ویژگی clip-path یکی از قابلیت‌های جذاب CSS است که به شما اجازه می‌دهد فقط بخشی از یک عنصر را نمایش دهید و بقیه قسمت‌ها را برش بزنید (Clip کنید).

این ویژگی روی موارد زیر قابل استفاده است:

• تصاویر (Images)
• عناصر HTML
• عناصر SVG

با استفاده از clip-path می‌توانید اشکال مختلفی مانند دایره، بیضی، مثلث، ستاره و حتی اشکال سفارشی SVG ایجاد کنید، بدون اینکه نیاز به ویرایش تصویر در نرم‌افزارهای گرافیکی داشته باشید.

ایجاد اشکال پایه با clip-path

CSS چند شکل آماده برای clip-path در اختیار شما قرار می‌دهد:

• polygon()
• circle()
• ellipse()
• inset()

استفاده از Polygon

تابع polygon() انعطاف‌پذیرترین گزینه است.

در این روش نقاط شکل را با مختصات X و Y مشخص می‌کنید.

ساختار کلی:

clip-path: polygon(x1 y1, x2 y2, x3 y3);

مختصات می‌توانند:

• درصد (%)
• پیکسل (px)
• یا هر واحد CSS دیگر

باشند.

ساخت مثلث

.polygon1 {
  -webkit-clip-path: polygon(
    50% 0%,
    0% 100%,
    100% 100%
  );

  clip-path: polygon(
    50% 0%,
    0% 100%,
    100% 100%
  );
}

نتیجه:

🔺 تصویر به شکل مثلث نمایش داده می‌شود.

ساخت شکل X

.polygon2 {
  -webkit-clip-path: polygon(
    20% 0%,
    0% 20%,
    30% 50%,
    0% 80%,
    20% 100%,
    50% 70%,
    80% 100%,
    100% 80%,
    70% 50%,
    100% 20%,
    80% 0%,
    50% 30%
  );

  clip-path: polygon(
    20% 0%,
    0% 20%,
    30% 50%,
    0% 80%,
    20% 100%,
    50% 70%,
    80% 100%,
    100% 80%,
    70% 50%,
    100% 20%,
    80% 0%,
    50% 30%
  );
}

نتیجه:

✖ تصویر به شکل حرف X در می‌آید.

ساخت ستاره

.polygon3 {
  -webkit-clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

نتیجه:

⭐ تصویر به شکل ستاره نمایش داده می‌شود.

استفاده از Circle

ساختار:

circle(radius at x y)

اگر موقعیت مشخص نشود، مرکز دایره در وسط عنصر قرار می‌گیرد.

دایره ساده

.circle {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}

دایره با موقعیت سفارشی

.circle2 {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);
}

در این مثال:

• شعاع = 70٪
• مرکز دایره = 70٪ افقی و 20٪ عمودی

استفاده از Ellipse

ساختار:

ellipse(radiusX radiusY at x y)

بیضی ساده

.ellipse {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}

بیضی با موقعیت سفارشی

.ellipse2 {
  -webkit-clip-path: ellipse(
    50% 65%
    at 70% 50%
  );

  clip-path: ellipse(
    50% 65%
    at 70% 50%
  );
}

استفاده از Inset

تابع inset() یک مستطیل داخلی ایجاد می‌کند و هر چیزی خارج از آن را حذف می‌کند.

این قابلیت برای کراپ کردن تصاویر بسیار مفید است.

نمونه ساده

.inset {
  -webkit-clip-path:
    inset(20% 25% 20% 10%);

  clip-path:
    inset(20% 25% 20% 10%);
}

مستطیل با گوشه‌های گرد

.inset2 {
  -webkit-clip-path:
    inset(
      45% 0% 33% 10%
      round 10px
    );

  clip-path:
    inset(
      45% 0% 33% 10%
      round 10px
    );
}

در این مثال:

round 10px

باعث گرد شدن گوشه‌ها می‌شود.

ساخت انیمیشن با clip-path

یکی از جذاب‌ترین کاربردهای clip-path ساخت انیمیشن است.

مثال:

.trigger-btn:hover + img {
  animation: magic 4s infinite;
}

درون @keyframes می‌توانید شکل‌های مختلفی تعریف کنید تا تصویر بین آن‌ها تغییر کند.

@keyframes magic {
  0% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }

  100% {
    clip-path: polygon(
      50% 0,
      50% 0,
      100% 100%,
      0 100%
    );
  }
}

نکته مهم:

تمام مراحل انیمیشن باید تعداد نقاط یکسانی داشته باشند، در غیر این صورت انیمیشن به درستی اجرا نمی‌شود.

استفاده از اشکال SVG سفارشی

اگر اشکال آماده کافی نباشند، می‌توانید از SVG استفاده کنید.

ابتدا در SVG:

سپس در CSS:

.svg-shape {
  -webkit-clip-path:
    url(#my-shape);

  clip-path:
    url(#my-shape);
}

به این ترتیب هر شکل SVG دلخواه می‌تواند به عنوان ماسک برش استفاده شود.

ابزار مفید برای ساخت clip-path

یکی از بهترین ابزارها برای طراحی اشکال:

Clippy

این ابزار به شما امکان می‌دهد شکل موردنظر را به‌صورت بصری طراحی کرده و کد CSS آماده دریافت کنید.

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

طبق آمار سال ۲۰۲۰:

✅ حدود ۹۵٪ مرورگرهای دنیا از clip-path پشتیبانی می‌کنند.

اما برای سازگاری بهتر با Safari توصیه می‌شود همیشه نسخه پیشونددار را نیز بنویسید:

-webkit-clip-path

در کنار:

clip-path

جمع‌بندی

ویژگی clip-path ابزاری قدرتمند برای برش دادن تصاویر و عناصر HTML است. با استفاده از توابعی مانند polygon، circle، ellipse و inset می‌توان اشکال متنوعی ایجاد کرد و حتی با ترکیب آن با انیمیشن‌ها جلوه‌های بصری جذابی ساخت. همچنین امکان استفاده از اشکال سفارشی SVG وجود دارد که آزادی عمل بسیار زیادی در طراحی فراهم می‌کند.

از همراهی شما با پارمین کلود سپاسگزاریم.