مولّد clip-path لأشكال CSS

كيفية استخدام مولّد clip-path

1. اختر الشكل: مضلّع أو دائرة أو قطع ناقص أو مستطيل داخلي. تُظهر الطبقة الباهتة العنصر كاملًا، وتُظهر الطبقة الساطعة ما يبقى مرئيًا بعد القص.
2. اسحب النقاط في المحرّر. في المضلّع، كل نقطة رأسٌ من رؤوسه، وانقر في أي مكان داخل المساحة لإضافة نقطة على أقرب ضلع. في الدائرة أو القطع الناقص، اسحب نقطة المركز ونقاط نصف القطر. وفي المستطيل الداخلي، اسحب نقاط الحواف الأربع.
3. اضبط القيم بدقة في الحقول أدناه: قائمة النقاط (X وY بالنسبة المئوية، مع زرّي حذف وإضافة نقطة) للمضلّعات، أو حقول نصف القطر والمركز X والمركز Y وأعلى ويمين وأسفل ويسار وزوايا مستديرة (px) للأشكال الأخرى.
4. ابدأ بسرعة من الأشكال الجاهزة: مثلث، وشبه منحرف، ومتوازي أضلاع، ومعيّن، وخماسي، وسداسي، وثماني، وزوايا مشطوفة، ونجمة، وصليب، وأسهم، وشيفرون، وفقاعة كلام، ودائرة، وقطع ناقص، ومستطيل داخلي.
5. فعّل الالتصاق كل 5 % للحصول على قيم مرتّبة، وإضافة ‎-webkit-clip-path (إصدارات Safari القديمة) إذا كنت لا تزال تدعم Safari 13.0 أو ما قبله.
6. يمكنك اختياريًا إفلات صورة في صورة الخلفية (اختيارية) لترى الشكل على صورتك. لا يُرفع الملف أبدًا.
7. انسخ شيفرة CSS بالضغط على نسخ.

لوحة المفاتيح: حدّد نقطة وحرّكها بمفاتيح الأسهم (1 %، أو 10 % مع Shift)، واضغط Delete لحذف نقطة من المضلّع. يحتفظ المضلّع دائمًا بثلاث نقاط على الأقل.

دوال الأشكال في clip-path

تُخفي الخاصية clip-path كل ما يقع خارج الشكل. يحتفظ العنصر بحجمه في التخطيط، ولا يُقصّ إلا ما يُرسم والمساحة القابلة للنقر.

• polygon(x1 y1, x2 y2, …) تصل النقاط بالترتيب وتغلق الشكل. فالقيمة polygon(50% 0%, 100% 100%, 0% 100%) مثلث رأسه إلى الأعلى. تبدأ الإحداثيات من الزاوية العليا اليسرى للعنصر.
• circle(r at cx cy): القيمة circle(50% at 50% 50%) هي أكبر دائرة متمركزة في العنصر. ويُحسب نصف القطر بالنسبة المئوية من قطر العنصر مقسومًا على √2، فلا يساوي نسبة من العرض إلا في العناصر المربعة.
• ellipse(rx ry at cx cy): نصف القطر الأفقي نسبة من العرض، والعمودي نسبة من الارتفاع.
• inset(top right bottom left round radius) تقتطع مستطيلًا داخل الحواف، بالصيغة المختصرة نفسها للهوامش (من قيمة إلى أربع قيم) مع زوايا مستديرة اختيارية.

تكتب هذه الأداة القيم بالنسب المئوية، فيتناسب الشكل مع العنصر أيًّا كان حجمه.

نصائح لأشكال جيدة

• ترتيب نقاط المضلّع مهم: الدوران حول الحافة في اتجاه عقارب الساعة (أو عكسه) يجنّبك الأشكال المتقاطعة التي تشبه «ربطة العنق».
• يمكن تحريك الانتقال بين شكلين لهما عدد النقاط نفسه: فالقاعدة transition: clip-path 0.4s تحوّل سداسيًا إلى سداسي آخر بسلاسة. أما المضلّعات ذات الأعداد المختلفة من النقاط فلا يستطيع المتصفح الانتقال بينها.
• تقصّ clip-path أيضًا box-shadow والحدود. لإضافة ظل إلى شكل مقصوص، ضع filter: drop-shadow() على عنصر أب.
• لا تستقبل المناطق المقصوصة النقرات ولا مرور المؤشر، وهذا مفيد للأزرار ذات الأشكال غير المنتظمة.