UTILS.
الخصوصية افتراضيًا
◇

مولّد CSS clip-path

اقتطع عنصرًا إلى أشكال شائعة وانسخ كود CSS الخاص بـ clip-path.

ملفاتك تبقى على هذا الجهاز

تُعالَج الملفات في متصفحك ولا تُرفع أبدًا. يُنزّل الموقع الشيفرة والموارد اللازمة لتشغيل الأدوات. بلا حسابات أو تتبّع.

استخدم التنزيل لحفظ هذه الأداة كملف HTML واحد للعمل دون اتصال.

الخصوصية →

جرّب مثالًا محلولًا

مثال

اختر شكل السداسي لتحصل على clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. كل زوج هو موضع x وy داخل العنصر، لذا يتمدد الشكل مع عرض العنصر وارتفاعه.

ضع في اعتبارك

يخفي القص جزءًا من العنصر لكنه يُبقي صندوق تخطيطه: لا تتحرك العناصر المجاورة، ولا تعود الزوايا المخفية تستقبل النقرات. تُقص الحدود وظلال الصندوق أيضًا؛ وإن احتجت ظلًا فطبّق مرشح drop-shadow على عنصر مغلِّف.

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

اختر شكلًا واقتطع فورًا مربع المعاينة بقاعدة clip-path المطابقة، ثم انسخ كود CSS جاهزًا للاستخدام. تتحدّث المعاينة مباشرةً، بالكامل داخل متصفّحك.

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

كيف تعمل مسارات الاقتطاع المضلّعة (polygon)؟
كل نقطة هي زوج من نسبتي x و y بالنسبة للمربع؛ يربط المتصفّح بينها بالترتيب ويُظهر فقط المساحة داخل المخطّط.
هل تدعم كل المتصفّحات clip-path؟
أشكال polygon و circle و ellipse و inset مدعومة في كل المتصفّحات الحديثة، لذا يعمل كود CSS المُولَّد دون بادئات.

المزيد من الأدوات