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

bookmark_border با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

Noam Rosenthal

تاریخ انتشار: 8 آوریل 2025

ویژگی clip-path به شما امکان می دهد شکل یک عنصر را با برش دادن به یک دایره، چند ضلعی یا حتی یک مسیر SVG تغییر دهید. با این حال، قبل از کروم 135 و سافاری 18.4، باید بین چند ضلعی های پاسخگو و اشکال پیچیده تری که با استفاده از مسیرهای SVG پاسخگو نیستند، یکی را انتخاب کنید. با تابع new 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. حرکت به 0، 20.
2. منحنی به 100، 20، با استفاده از نقاط کنترل (25،0 و 75، 40).
3. خط عمودی تا 80
4. با استفاده از نقاط کنترل (75،100 و 25،50) به 0، 80 منحنی کنید.
5. مسیر را ببندید (خط 0،20).

این یک شکل پرچم را ترسیم می کند، اما همه واحدها در پیکسل هستند. 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
  )
}

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

@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
  )
}

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

در Chrome 135 یا Safari 18.4، می‌توانید شکل پرچم متحرک ایجاد شده با استفاده از clip-path: shape() در این نسخه نمایشی CodePen مشاهده کنید.

خلاصه

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

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

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