مولد مسار القص
صمّم مسارات CSS المقطوعة المعقدة بصريًا.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- انقر واسحب المقابض لإعادة التشكيل
- استخدم الإعدادات المسبقة للأشكال السريعة
- جرّب وضع 'polygon' للأشكال المخصصة
الأدوات الموصى بها
أدوات مختارة بعناية قد تجدها مفيدة
قصّ أشكال مخصّصة بـ CSS clip-path
نظرة عامة
تتيح لك خاصية CSS clip-path قصّ عنصر إلى شكل مخصّص — مثلث أو سداسي أو سهم أو بقعة أو أي مضلّع — دون تحرير الصور. طريقة قوية لإضافة تصميم غير مستطيل دون ملفات إضافية. ولأن كتابة الإحداثيات يدوياً مزعجة، يتيح لك مولّد clip-path هذا سحب النقاط بصرياً وينسخ CSS الدقيق، كل ذلك في متصفحك.
كيفية الاستخدام
- 1
اختر شكلاً أو ارسمه
ابدأ من إعداد مسبق (مثلث، سداسي، دائرة) أو ضع نقاطاً لتعريف مضلّع مخصّص.
- 2
اسحب النقاط
حرّك الزوايا في المعاينة الحية حتى يبدو الشكل صحيحاً.
- 3
انسخ CSS الخاص بـ clip-path
الصق قيمة clip-path المولّدة على عنصرك لقصّه إلى ذلك الشكل.
كيف يعمل
تختار شكلاً أو ترسمه، فتعرّفه الأداة بـ clip-path — عادةً polygon() بإحداثيات نسبية، أو إعداداً مسبقاً مثل circle() أو ellipse(). كل ما خارج الشكل يصبح شفافاً، فيظهر العنصر داخل الحدّ فقط. تسحب النقاط في معاينة حية، فتكتب الأداة قيمة clip-path المطابقة لتلصقها على أي عنصر.
متى تستخدمه
قصّ صورة أو قسم إلى شكل مائل أو هندسي. إنشاء فاصل قطري بين أقسام الصفحة. صنع صورة رمزية أو شارة سداسية. إضافة شكل سهم أو فقاعة كلام لتعليق. تصميم هيرو أو بطاقة غير مستطيلة. تعلّم كيف تُخطَّط إحداثيات المضلّع إلى شكل مرئي.
الأسئلة الشائعة
يُقصّ — يصبح شفافاً تماماً وغير تفاعلي، فتمرّ النقرات عبره. يظهر العنصر ويستجيب داخل حدّ الشكل فقط؛ أما صندوق التخطيط الأساسي فيظل يشغل مساحته الأصلية.
ملاحظات مهمة
يقصّ clip-path بصرياً، لكن صندوق العنصر يظل يشغل كامل مساحته المستطيلة في التخطيط، ما قد يسبّب تداخلاً أو مفاجآت في التباعد. كما أن المحتوى المقصوص مخفيّ لا محذوف — فلا تعتمد عليه لإخفاء معلومات حساسة.