مُنشئ clip-path في CSS: اقصص العناصر إلى أي شكل دون صور

تُعدّ خاصية clip-path في CSS من أكثر الأدوات تعبيراً وأقلّها استخداماً في تطوير الواجهات الحديثة. فهي تتيح لك قصّ أي عنصر إلى الشكل الذي تريده — مثلّثات، أشكال سداسية، نجوم، فقاعات حوار، دوائر، فواصل أقسام مائلة — دون أي صورة أو قناع SVG أو عنصر تغليف إضافي. يتولّى المتصفّح كل العمل على معالج الرسوميات، وتظلّ النتيجة حادّة عند أي دقة، ويمكن تحريك الشكل والانتقال بينه كأي قيمة CSS أخرى. المشكلة الوحيدة أنّ كتابة clip-path يدوياً مرهقة: حساب النِّسب المئوية لنجمة ذات عشر نقاط ليس أمراً ممتعاً. وهذا تحديداً ما يحلّه مُنشئ clip-path في CSS.

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

ما هي clip-path؟

تُعرّف خاصية clip-path منطقة قصّ — فلا يُرسَم سوى الجزء الواقع داخل المنطقة، ويُخفى كل ما خارجها. وعلى خلاف overflow: hidden التي تقصّ إلى مستطيل فقط، تقبلclip-path دوال أشكال هندسية قادرة على وصف أي مخطّط تقريباً. ويبقى العنصر المقصوص محتفظاً بمساحته الطبيعية في التخطيط؛ تتغيّر فقط بكسلاته المرئية.

ولأنّ القصّ يحدث وقت الرسم، يبقى المحتوى الأساسي — النصوص والصور والخلفيات وحتى الفيديو — محفوظاً بالكامل ومتاحاً لقارئات الشاشة. أنت لا تحذف المحتوى، بل تُخفي طريقة رسمه فقط، ممّا يجعلclip-path مثالية للقصّ الزخرفي مع الحفاظ على أهمية المحتوى لمحرّكات البحث.

دوال الأشكال الأربع

1. polygon()

أقوى الدوال. تُمرّر قائمة بأزواج إحداثيات x y، فيصل المتصفّح بينها بالترتيب لتكوين شكل مغلق. تكون الإحداثيات عادةً نِسباً مئوية نسبةً إلى صندوق العنصر، حيث 0% 0% هي الزاوية العلوية اليسرى و100% 100% هي السفلية اليمنى.

/* مثلّث يشير إلى الأعلى */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

/* شكل سداسي */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

/* فاصل قسم مائل */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

2. circle()

تقصّ العنصر إلى دائرة. تُحدّد نصف القطر وموضع المركز عبر الكلمة at. نصف قطر بقيمة50% في المنتصف يُنتج دائرة محيطة مثالية.

/* دائرة مثالية */
clip-path: circle(50% at 50% 50%);

/* دائرة مزاحة عن المركز */
clip-path: circle(40% at 30% 30%);

3. ellipse()

مثل circle() لكن بنصفَي قطر أفقي ورأسي مستقلَّين، ما يتيح صنع أشكال بيضاوية تتمدّد لتناسب العناصر غير المربّعة.

clip-path: ellipse(50% 35% at 50% 50%);

4. inset()

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

/* إطار داخلي 10% من كل جهة مع زوايا مدوّرة */
clip-path: inset(10% 10% 10% 10% round 12%);

حالات استخدام واقعية

فواصل الأقسام المائلة

الفاصل المائل بين أقسام صفحات الهبوط الذي يحبّه المصمّمون ما هو إلا مضلّع واحد. بلا SVG ولا صورة خلفية:

.section-angled {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

شبكات الصور الرمزية السداسية

كثيراً ما تستخدم صفحات الفِرق وواجهات الألعاب صوراً رمزية سداسية. قصّ سداسي على حاوية صورة مربّعة يمنحك الشكل فوراً، وتبقى الصورة حادّة على الشاشات عالية الدقة لأنّها لم تُمسّ.

حركات الكشف

ولأنّ clip-path قابلة للتحريك، يمكنك بناء تأثيرات كشف مبهرة بالانتقال بين مضلّعَين لهما العدد نفسه من النقاط:

.reveal {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.6s ease;
}
.reveal.is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

أخطاء شائعة

• اختلاف عدد النقاط في الحركات. لتحريك سلس بين مضلّعَين، يجب أن يكون لهما العدد نفسه من الرؤوس. وإن اختلفا، يقفز الانتقال بدل أن يتحوّل بسلاسة.
• نسيان البادئة -webkit-. ما زالت إصدارات Safari الأقدم تتطلّب -webkit-clip-path إلى جانب الخاصية القياسية. أخرِج الاثنتين دائماً.
• قصّ العناصر التفاعلية. المنطقة المقصوصة غير مرئية، لكن صندوق العنصر قد يظلّ يستقبل أحداث المؤشّر خارج الشكل المرئي. اختبر مناطق النقر على الأزرار.
• تثبيت الإحداثيات بالبكسل. استخدم النِّسب المئوية ليتمدّد الشكل مع العنصر بدل أن ينكسر عند الأحجام المختلفة.

استخدام مُنشئ clip-path في BrowseryTools

يحوّل مُنشئ clip-path حسابات الإحداثيات إلى تحكّم مباشر. إليك كيفية استخدامه:

• اختر نوع الشكل: بدّل بين المضلّع والدائرة والقطع الناقص والإطار الداخلي من الأعلى.
• اسحب الرؤوس: في وضع المضلّع، اسحب المقابض على المعاينة الحيّة لإعادة تشكيل المخطّط، أو اضبط كل نقطة بدقّة عبر منزلقَي X وY.
• أضِف أو احذف النقاط: ابنِ أي شكل من مثلّث بسيط إلى نجمة معقّدة عبر أدوات الإضافة والحذف.
• ابدأ من شكل جاهز: حمّل مثلّثاً أو مُعيّناً أو خماسياً أو سداسياً أو نجمة أو فقاعة رسالة أو سهماً أو شيفرون، ثم خصّصه.
• انسخ كود CSS: يتضمّن الناتج التصريح القياسي والمسبوق بـ-webkit- معاً، جاهزاً للّصق.

يعمل كل شيء داخل متصفّحك بالكامل — ولا تُرفَع أي بيانات شكل إطلاقاً. وتعمل الأداة دون اتصال بمجرّد تحميل الصفحة.

دعم المتصفّحات

خاصية clip-path مع الأشكال الأساسية مدعومة في كل المتصفّحات الحديثة — Chrome وFirefox وSafari وEdge — وتغطّي أكثر من 97% من الاستخدام العالمي. وإضافة البادئة-webkit-clip-path تغطّي ما تبقّى من إصدارات WebKit الأقدم. استخدامها آمن في الإنتاج اليوم للقصّ الزخرفي.