الرئيسية
CSS والتصميم
مُحول مسار قص CSS

مُحول مسار قص CSS أنشئ أشكالًا لمسار القص CSS باستخدام مسابقة متعددة الزوايا والدوائر والأشكال البيضاوية.

🎨

مُحول مسار قص CSS

أنشئ أشكالًا لمسار القص CSS باستخدام مسابقة متعددة الزوايا والدوائر والأشكال البيضاوية.

اختر شكلًا مسبقًا

اختر من بين المجموعة المسبقة مثل المثلث أو السداسي أو النجم أو الدائرة أو البيضاوي.

تخصيص المسار

عدل قيمة clip-path مباشرة للحصول على التحكم الدقيق في الشكل.

نسخ CSS

معاينة الشكل المحظور ونسخ CSS مع بادئة webkit المضمنة.

Loading tool...

What Is مُحول مسار قص CSS?

مُحول مسار القص CSS يخلق أقنعة قص لعناصر HTML باستخدام خاصية clip-path. تعرف الخاصية clip-path منطقة مرئية للعنصر - يتم إخفاء كل شيء خارج المسار. يدعم هذا الأداة العديد من دوال الشكل: متعددة الأضلاع لمسارات مخصصة متعددة النقاط، ودائرة لقطع دائرية، ومستطيل لشكال بيضوية، ومدخل للقطع المستطيلة مع اختياري التدوير. تحتوي مكتبة الأشكال المسبقة على مثلث ومتوازي وأمبزوج ورخام五 وخماسي سداسي ونجمي. يمكنك أيضًا تحرير قيمة clip-path مباشرة للأشكال المخصصة. يتضمن CSS الناتج بادئة -webkit-clip-path لتحقيق دعم أوسع للمتصفحات. خاصية clip-path قوية لإنشاء تخطيطات غير مستطيلة وقواميس الصور وفرق أقسام إبداعية وأشكال عناصر الواجهة الفريدة.

Why Use مُحول مسار قص CSS?

مكتبة مسبقة شاملة تشمل الأشكال المتعددة والدوائر والنجوم
تحرير مباشر لقيم clip-path للأشكال المخصصة
تشمل بادئة webkit لدعم المتصفحات الأوسع
معاينة في الوقت الفعلي مع لون خلفية قابل للتخصيص

Common Use Cases

مasks الصور

قطع الصور إلى أشكال مخصصة مثل الدوائر أو السداسيات أو النجوم.

منقسمات القسم

إنشاء انتقالات مقسمة زاويّة أو منحنية باستخدام clip-path.

التخطيط الإبداعي

بناء مناطق المحتوى غير المستطيلة لتصاميم صفحة فريدة.

صور الملفات الشخصية

قطع صور الملفات الشخصية إلى أشكال سداسية أو مستديرة.

Technical Guide

ت接受 خاصية clip-path في CSS عدة دوال للشكل: يعرف đa giác() شكلًا باستخدام أزواج إحداثيات كنسبة مئوية أو طول. tạo دائرة() قطعًا دائريًا مع نصف قطر وموقع مركز. tạo مستطيل() شكلاً بيضويًا مع نصف قطري أفقي ورأسي. ایجاد مدخل() قصًا مستطيلاً مع اختياري الحواف المستديرة. ت接受 دالة đa giác() أي عدد من أزواج إحداثيات x و y، مما يجعلها الأكثر مرونة. الإحداثيات 相对于 العنصر - 0٪ 0٪ هو الزاوية العلوية اليسرى و 100٪ 100٪ هو الزاوية السفلى اليمنى. لتحريك الصور، يمكن انتقالية clip-path إذا تم استخدام نفس دالة الشكل مع نفس عدد النقاط. دعم المتصفح جيد في المتصفحات الحديثة، ولكن بادئة -webkit- موصى بها لمتصفح Safari. لا تؤثر خاصية clip-path على التصميم - يحتفظ العنصر بأبعاده الأصلية لنماذج الصندوق.

Tips & Best Practices

1
ابداً بشكل مسبق وعدل القيم للحصول على أشكال مخصصة
2
استخدم نفس عدد نقاط المتعدد للانتقالات القابلة للتحرير
3
دمج مع تحولات CSS لتحقيق تأثيرات الكشف والتغيير
4
clip-path يعمل جيدًا على الصور وعناصر الخلفية

Related Tools

مُحول مثلثات CSS

أنشئ مثلثات CSS باستخدام تقنية الحدود مع التحكم في الاتجاه واللون.

🎨 CSS & Design

مُولِد الكتلة CSS

إنشاء أشكال كتلة عضوية كـ SVG مع ملء تدرجي وتصادفي.

🎨 CSS & Design

مُحول موجات سي إس إس

إنشاء مقسمات أقسام SVG بموجات قابلة للتعديل وارتفاع وألوان.

🎨 CSS & Design

مُولِد قَسْم CSS

إنشاء أقسام منفصلة في CSS بطرق متعددة تشمل التدرج والظل والزغب.

🎨 CSS & Design

Frequently Asked Questions

Q هل يؤثر clip-path على تخطيط العنصر؟

لا، يحتفظ العنصر بنموذج صندوقه الكامل. فقط التمثيل المرئي يتأثر بالقطع.

Q يمكنني تحريك clip-path؟

نعم، يدعم clip-path تحولات CSS عند استخدام نفس الدالة وعدد النقاط في كلا الحالتين.

Q هل يدعم كل المتصفحات clip-path؟

المتصفحات الحديثة تدعم clip-path. بادئة -webkit- تضمن توافق Safari. IE لا يدعم clip-path.

Q يمكنني قص النص باستخدام clip-path؟

نعم، يعمل clip-path على أي عنصر HTML بما في ذلك حاويات النص. استخدم -webkit-background-clip: text للقص الخاص بالنص.

Q ما الفرق بين clip-path و mask؟

يستخدم clip-path دوال الشكل للقطع الحدي. يستخدم CSS mask الصور أو التدرجات ودعم الحواف الناعمة والشفافية الجزئية.

About This Tool

مُحول مسار قص CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.