CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

نوع الشكل

نصف القطر: 40%

المركز X: 50%

المركز Y: 50%

معاينة مباشرة

CSS المُولَّد

.element {
  clip-path: circle(40% at 50% 50%);
}

حول هذه الأداة

يُنشئ مولِّد CSS Clip-Path قيم clip-path لأربعة أنواع من الأشكال: circle()، وellipse()، وinset()، وpolygon().

يتيح تصميمات إبداعية وأقنعة صور وأشكال أقسام hero بدون ملفات SVG. تُحدِّث جميع المعاملات المعاينة في الوقت الفعلي.

تستخدم أقسام hero أشكال clip-path قطرية أو منحنية كفواصل مرئية. تستخدم صور الملف الشخصي circle(). تستخدم تأثيرات التمرير رسوم clip-path المتحركة.

هل يؤثر clip-path على منطقة النقر؟ — نعم. المناطق المقصوصة غير قابلة للنقر.
هل يمكنني تحريك clip-path؟ — نعم. يمكن انتقاله بين شكلين مضلعين بنفس عدد النقاط.
هل clip-path مدعوم في جميع المتصفحات؟ — نعم، بدعم كامل في جميع المتصفحات الحديثة.