مولد clip-path في CSS

وظائف الشكل الخمسة

مقاطع مضلعة شائعة

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

من المحتمل أن يكون القطر القطري للقسم الرئيسي هو الأكثر استخدامًا على الإطلاق - فهو يعطي قسمًا ذو مظهر عصري بدون أي SVG.

تحريك مسار المقطع

يتم تحريك مسار المقطع طالما أن كلتا الحالتين لهما وظيفة الشكل نفسها بنفس عدد النقاط. يتحرك المضلع ذو 4 رؤوس بسلاسة إلى مضلع آخر ذو 4 رؤوس؛ إضافة أو إزالة القمم يكسر الاستيفاء.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

استخدم هذا لتأثيرات الكشف، أو تشوهات التمرير الدقيقة، أو انتقالات الصفحة.

مسار المقطع مقابل التجاوز: مخفي

يتم تثبيت overflow: hidden على مستطيل مربع الحدود (والذي يمكن تقريبه باستخدام border-radius). يقطع clip-path أي شكل تحدده ويقطع كل شيء - بما في ذلك الظلال والخطوط العريضة. إذا كنت تريد أن تظل الظلال مرئية خارج الشكل، فإن clip-path ليس هو ما تريده.

يمكن لـ filter: drop-shadow() إعادة إضافة ظل يتبع الشكل على عناصر مسار المقطع، ولكنه أبطأ.

الأداء

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

إمكانية الوصول

يغير مسار المقطع ما هو مرئي فقط. تتبع برامج قراءة الشاشة وتركيز لوحة المفاتيح وأحداث المؤشر المربع الكامل للعنصر، وليس الشكل المقطوع. إذا تم قص الصورة داخل نجمة، تتم قراءة النص البديل بشكل طبيعي. إذا تم قص الزر على شكل شيفرون، فإن هدف النقر الخاص به هو المستطيل الكامل وليس الشيفرون المرئي، وهو ما قد يتسبب في نقرات غير مقصودة على مساحة تبدو فارغة.

بالنسبة للأزرار ذات الأشكال المقطوعة غير المعتادة، اضبط عرض/ارتفاع العنصر بشكل محكم بحيث يتطابق مربع الوصول مع المنطقة المرئية بشكل معقول.