مولد Clip-Path CSS — إنشاء أشكال إبداعية

clip-path في CSS يتيح الخروج من قيود مربع التخطيط المستطيل وإنشاء أشكال فريدة ومبدعة.

أشكال clip-path

• inset(): قص من الداخل مع دعم زوايا مستديرة
• circle(): قص دائري
• ellipse(): قص بيضاوي
• polygon(): شكل متعدد الأضلاع
• path(): مسار SVG لأشكال معقدة

تأثيرات القص الشائعة

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

/* سهم */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);

/* دائرة */
clip-path: circle(50%);

الجمع مع التحريكات

clip-path يمكن تحريكه بسلاسة مع CSS transitions وanimations. كلا الشكلين يجب أن يملكا نفس عدد النقاط.