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

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

Noam Rosenthal

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

تتيح لك السمة clip-path تغيير شكل عنصر من خلال الاقتصاص إلى دائرة أو مضلّع أو حتى مسار SVG. ومع ذلك، قبل الإصدار 135 من Chrome والإصدار 18.4 من Safari، كان عليك الاختيار بين المضلّعات التي تستجيب للتغييرات وأشكال أكثر تعقيدًا لا تستجيب للتغييرات باستخدام مسارات SVG. باستخدام الدالة الجديدة shape()، يمكن أن يقطع clip-path العنصر إلى شكل غير مضلّع يكون سريع الاستجابة أيضًا.

إنشاء شكل علم

على سبيل المثال، قارِن بين إنشاء شكل علم باستخدام clip-path: path() و clip-path: shape().

شكل العلم ليس مضلّعًا بالضبط، لأنّ حدوده العلوية والسفلية هي منحنيات برمجية Bézier ثلاثية الأبعاد بدلاً من خطوط مستقيمة أو زوايا مستديرة.

إنشاء العلامة باستخدام 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 التالي العلامة a 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. في المستقبل، نتوقّع استخدام هذا النوع من الأشكال لضبط شكل حدود العنصر، ما سيتيح المزيد من طرق التعبير غير المستطيلة.