مولّد CSS Clip Path

ما هو مولّد Clip Path؟

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

كيفية استخدام مولّد Clip Path

1. اختر شكلاً: مضلع أو دائرة أو قطع ناقص أو Inset.
2. للمضلعات اختر إعداداً مسبقاً ثم اسحب المقابض أو اكتب نسبة X/Y لكل نقطة؛ واستخدم إضافة نقطة / حذف نقطة.
3. للدائرة والقطع الناقص اضبط نصف القطر والمركز؛ ولـ inset اضبط الأعلى واليمين والأسفل واليسار ونصف قطر زاوية اختياري.
4. فعّل عرض المنطقة المقصوصة لترى ما يُقطع.
5. انسخ كود CSS.

مثال

Hexagon preset with point 1 moved to X 20%

clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

متى تستخدم مولّد Clip Path

استخدم clip-path لأشكال الصور الزخرفية وحواف الأقسام المائلة والصور الرمزية السداسية وحركات الكشف (يمكن تحريك clip-path بين أشكال لها عدد النقاط نفسه). المحتوى خارج الشكل مخفي ولا يستقبل النقرات. وللمستطيلات المستديرة فضّل border-radius؛ وللأشكال التي ينساب النص حولها استخدم shape-outside.

كيف يعمل مولّد Clip Path

الإحداثيات نسب مئوية من صندوق حدود العنصر، تُقاس من الزاوية العليا اليسرى. تُكتب المضلعات polygon(x% y%, …) بترتيب النقاط، والدوائر circle(r% at x% y%)، والقطوع الناقصة ellipse(rx% ry% at x% y%)، وinset بصيغة inset(top right bottom left round r) مع اختصار الإزاحات الأربع كاختصار margin. تدرج إضافة نقطة نقطة جديدة في منتصف المسافة بين النقطة المحددة والتالية.

حالات الاستخدام الشائعة

• ✓ صور رمزية سداسية أو نجمية الشكل
• ✓ حواف مائلة لأقسام الواجهة الرئيسية
• ✓ مؤشرات خطوات بأسهم وشرطات
• ✓ بطاقات بشكل فقاعة كلام
• ✓ حركات تحويل الأشكال عند التمرير

الأسئلة الشائعة

استكشف المزيد من الفئات