استخدام shape() للقطع المتوافق مع مختلف الأجهزة

Noam Rosenthal

تاريخ النشر: 8 أبريل 2025

تتيح لك السمة clip-path تغيير شكل عنصر من خلال قصّه إلى دائرة أو مضلّع أو حتى مسار SVG. ومع ذلك، قبل الإصدار 135 من Chrome والإصدار 18.4 من Safari، كان عليك الاختيار بين المضلّعات المتجاوبة والأشكال الأكثر تعقيدًا التي لا تتجاوب باستخدام مسارات 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. انتقِل إلى 0، 20.
2. انحناء إلى 100 و20 باستخدام نقاط التحكّم (25 و0 و75 و40)
3. خط عمودي إلى 80
4. انحناء إلى 0 و80 باستخدام نقاط التحكّم (75 و100 و25 و50)
5. أغلِق المسار (خط إلى 0,20).

يرسم هذا الرمز شكل علم، ولكن جميع الوحدات بالبكسل. يمكن لملف SVG تغيير حجم وحدات البكسل هذه إلى مربّع عرض، ولكن بطريقة تبدو دائمًا كتغيير هندسي لحجم الشكل بأكمله.

على سبيل المثال، إذا أردت تغيير حجم المستطيل بالكامل، ولكن مع الحفاظ على ارتفاع وعرض المنحنيات عند 20 بكسل، لن يكون تنسيق SVG مناسبًا لهذه المهمة.

إنشاء العلامة باستخدام 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
  )
}

تجربة العرض التوضيحي

في الإصدار 135 من Chrome أو الإصدار 18.4 من Safari، يمكنك الاطّلاع على شكل العلم المتحرّك الذي تم إنشاؤه باستخدام clip-path: shape() في هذا العرض التوضيحي على CodePen.

ملخّص

تتيح لك السمة clip-path: shape() اقتصاص العنصر باستخدام أشكال عشوائية ومتجاوبة، وهو ما كان ممكنًا في السابق فقط باستخدام تقنيات مثل التدرجات المخروطية أو الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) التي تم إنشاؤها باستخدام JavaScript.

يمكنك الاطّلاع على المواصفات للحصول على البنية الكاملة.

في الوقت الحالي، لا يمكن استخدامها إلا مع clip-path. في المستقبل، نتصوّر استخدام هذا النوع من الأشكال لضبط شكل حدود العنصر، ما سيتيح المزيد من طرق التعبير غير المستطيلة.