مولد مسار القص CSS
مرشد
مولد مسار القص CSS
أنشئ أشكال clip-path بتنسيق CSS بصريًا باستخدام محرر بالسحب والإفلات بديهي. قم ببناء مضلعات ودوائر وقطوع ناقصة وأشكال مدرجة، ثم انسخ كود CSS الذي تم إنشاؤه مباشرةً إلى أوراق الأنماط الخاصة بك.
كيف تستعمل
حدد نوع شكل أو ابدأ بقالب مُعد مسبقًا. اسحب نقاط التحكم لضبط الشكل بصريًا على لوحة المعاينة. يتم تحديث كود CSS clip-path في الوقت الفعلي أثناء التحرير. عندما تكون راضيًا عن النتيجة، انسخ كود CSS الذي تم إنشاؤه أو قم بالتصدير كملف SVG.
سمات
- محرر بالسحب والإفلات بصري – أنشئ الأشكال عن طريق تحريك نقاط التحكم مباشرة على اللوحة
- أنواع أشكال متعددة – مضلع، دائرة، قطع ناقص، وإدراج
- قوالب مُعدة مسبقًا – ابدأ من الأشكال الشائعة مثل المثلثات والنجوم والسهام والمزيد
- التراجع والإعادة – دعم كامل للتاريخ للتحرير غير المدمر
- محاذاة مع الشبكة – وضع النقاط بدقة مع إمكانية تكوين المحاذاة مع الشبكة
- تصدير SVG – قم بتنزيل شكلك كملف SVG
- إخراج CSS مباشر – انسخ خاصية clip-path التي تم إنشاؤها فورًا
التعليمات
-
ما هو clip-path بتنسيق CSS وكيف يعمل؟
يحدد clip-path بتنسيق CSS منطقة قص تحدد الأجزاء المرئية من العنصر. كل ما هو خارج شكل clip-path يكون مخفيًا. يدعم الأشكال الأساسية (دائرة، قطع ناقص، إدراج، مضلع) وتعريفات مسارات SVG. على عكس overflow:hidden التي تقص فقط إلى حدود مستطيلة، يمكن لـ clip-path إنشاء مناطق مرئية غير مستطيلة معقدة لتصميمات وتأثيرات بصرية إبداعية.
-
ما الفرق بين clip-path وقناع CSS؟
ينشئ clip-path حافة صلبة — تكون البكسلات مرئية بالكامل أو مخفية بالكامل بناءً على ما إذا كانت تقع داخل الشكل المحدد. يستخدم قناع CSS صورة أو تدرجًا للتحكم في الشفافية، مما يسمح بحواف ناعمة وشفافية جزئية. clip-path أبسط وأكثر كفاءة من حيث الأداء للأشكال الهندسية، بينما توفر الأقنعة مزيدًا من التحكم الفني مع التدرجات وقنوات ألفا.
-
كيف تعمل إحداثيات المضلع في CSS؟
تستخدم إحداثيات المضلع في clip-path قيم النسبة المئوية أو الطول بالنسبة للصندوق المحيط بالعنصر. يتم تعريف كل نقطة كزوج x،y حيث 0% 0% هي الزاوية العلوية اليسرى و 100% 100% هي الزاوية السفلية اليمنى. يتم توصيل النقاط بالترتيب لتشكيل الشكل. على سبيل المثال، polygon(50% 0%, 100% 100%, 0% 100%) ينشئ مثلثًا. يتم إغلاق الشكل تلقائيًا عن طريق توصيل النقطة الأخيرة بالنقطة الأولى.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
