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