از shape() برای برش پاسخگو استفاده کنید

Noam Rosenthal

منتشر شده: ۸ آوریل ۲۰۲۵

ویژگی clip-path به شما امکان می‌دهد شکل یک عنصر را با برش به یک دایره، چندضلعی یا حتی یک مسیر SVG تغییر دهید. با این حال، قبل از Chrome 135 و Safari 18.4، شما مجبور بودید بین چندضلعی‌های واکنش‌گرا و اشکال پیچیده‌تری که با استفاده از مسیرهای SVG واکنش‌گرا نیستند، یکی را انتخاب کنید. با تابع جدید shape() ، یک clip-path می‌تواند عنصر را به شکلی غیر چندضلعی برش دهد که آن هم واکنش‌گرا است.

ایجاد شکل پرچم

به عنوان مثال، ایجاد یک شکل پرچم را با استفاده از clip-path: path() و clip-path: shape() مقایسه کنید.

شکل پرچم دقیقاً یک چندضلعی نیست، زیرا حاشیه‌های بالا و پایین آن به جای خطوط مستقیم یا گوشه‌های گرد، منحنی‌های بزیر مکعبی هستند.

ایجاد پرچم با استفاده از clip-path: path()

شکلی مانند این پرچم را می‌توان با استفاده از یک مسیر SVG نمایش داد:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

برای روشن شدن این موضوع، یک مسیر SVG مجموعه‌ای از دستورات مسیر است:

1. به ۰، ۲۰ بروید.
2. با استفاده از نقاط کنترل (۲۵،۰ و ۷۵،۴۰)، منحنی را به ۱۰۰، ۲۰ برسانید.
3. خط عمودی تا ۸۰.
4. با استفاده از نقاط کنترل (۷۵،۱۰۰ و ۲۵،۵۰)، منحنی را به ۰، ۸۰ برسانید.
5. مسیر را ببندید (خط تا ۰،۲۰).

این یک شکل پرچم رسم می‌کند، اما همه واحدها بر حسب پیکسل هستند. SVG می‌تواند آن پیکسل‌ها را در یک کادر نمایش مقیاس‌بندی کند، اما به روشی که همیشه مانند یک مقیاس هندسی از کل شکل به نظر برسد.

برای مثال، اگر می‌خواهید کل مستطیل مقیاس‌بندی شود، اما ارتفاع و عرض منحنی‌ها 20 پیکسل باقی بماند، SVG برای این کار مناسب نخواهد بود.

ایجاد پرچم با shape()

همین نتیجه را با استفاده از shape() مقایسه کنید. تابع shape مجموعه‌ای از دستورات را می‌پذیرد، مشابه دستورات مسیر SVG. با این حال، این دستورات طول و درصد CSS را در هر واحد CSS می‌پذیرند.

CSS زیر، پرچم را به shape() با واحدهای درصد تبدیل می‌کند:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

آن را واکنش‌گرا کنید

با طیف کاملی از طول‌های CSS موجود، می‌توانید انتخاب کنید که برای هر مختصات از کدام یک استفاده کنید.

برای مثال، برای اینکه کل اندازه پرچم بر اساس اندازه عنصر تغییر کند، اما ارتفاع منحنی ثابت بماند، می‌توانید موارد زیر را انجام دهید:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

افزودن ویژگی‌ها و انیمیشن‌های سفارشی

با شکل تعریف‌شده در CSS، می‌توانید از ویژگی‌های سفارشی نیز استفاده کنید تا تغییر ارتفاع آسان شود:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

شما حتی می‌توانید با استفاده از توصیفگر @property ، ویژگی CSS را متحرک کنید و آن را طوری نگه دارید که بیش از حد بزرگ نشود:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

نسخه آزمایشی را امتحان کنید

در کروم ۱۳۵ یا سافاری ۱۸.۴، می‌توانید شکل پرچم متحرک ایجاد شده با استفاده از clip-path: shape() در این نسخه آزمایشی CodePen مشاهده کنید.

خلاصه

clip-path: shape() به شما امکان می‌دهد عنصر خود را با استفاده از اشکال دلخواه و واکنش‌گرا برش دهید، که قبلاً فقط با استفاده از تکنیک‌هایی مانند گرادیان‌های مخروطی یا SVG ساخته شده توسط جاوا اسکریپت امکان‌پذیر بود.

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

در حال حاضر، این فقط برای clip-path کار می‌کند. در آینده، پیش‌بینی می‌کنیم که از این نوع شکل برای تنظیم شکل حاشیه عنصر استفاده کنیم، که روش‌های بیان غیرمستطیلی بیشتری را باز خواهد کرد.