Developer Tools
Design Tools
Web Utilitiesمولد مسار القطع CSS
أنشئ مسارات قطع CSS للمضلعات والدوائر والقطع الناقص باستخدام محرر مرئي للسحب والإفلات. استخدم الإعدادات المسبقة للأشكال الشائعة مثل الأسهم والمثلثات والنجوم. انسخ كود CSS فوراً.
نقطة 1
نقطة 2
نقطة 3
نقطة 4
خاصية CSS
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}قيمة CSS
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)أدوات ذات صلة
حول هذه الأداة
كيف تعمل
- اختر نوع الشكل: مضلع أو دائرة أو قطع ناقص
- اسحب نقاط التحكم على لوحة المعاينة لإعادة تشكيل مسار القطع
- اضبط الإعدادات باستخدام أشرطة الانزلاق والمدخلات للتحكم الدقيق
- انسخ قيمة CSS clip-path المُولَّدة لاستخدامها في أوراق الأنماط
- استخدم الإعدادات المسبقة للأشكال الشائعة مثل الأسهم والمثلثات والنجوم
- شاهد معاينة clip-path مطبقاً على صورة حقيقية أو خلفية لون صلب
حالات الاستخدام الشائعة
- إنشاء قصاصات صور غير مستطيلة لأقسام البطولة
- بناء فواصل أقسام قطرية أو على شكل شيفرون
- تصميم صور ملف شخصي أو شارات على شكل مضلع
- إنشاء أقنعة صور هندسية للمعارض
- بناء أزرار دعوة للعمل على شكل سهم
- تصميم بطاقات واجهة مستخدم وتلميحات أدوات بأشكال مخصصة
الأسئلة الشائعة
ما هو CSS clip-path؟
تتيح لك خاصية CSS clip-path تحديد منطقة قطع للعنصر — يظهر فقط الجزء الداخل في المنطقة، ويُخفى كل ما هو خارجها. تدعم الأشكال مثل polygon() وcircle() وellipse() وpath()، مما يتيح إنشاء عناصر غير مستطيلة وفواصل قسم قطرية وأقنعة صور هندسية.
كيف أسحب نقاط التحكم في المعاينة؟
عند اختيار نوع شكل المضلع، تظهر مقابض دائرية زرقاء على لوحة المعاينة عند كل رأس من رؤوس المضلع. انقر واسحب أي مقبض لإعادة تحديد موضعه. يتحدث إخراج CSS فوراً أثناء السحب.
ماذا تعني نسب X و Y؟
يتم التعبير عن إحداثيات مضلع clip-path كنسب مئوية من عرض العنصر وارتفاعه. 0% 0% هو الركن العلوي الأيسر، و100% 0% هو العلوي الأيمن، و100% 100% هو السفلي الأيمن، و0% 100% هو السفلي الأيسر.
كيف أضيف أو أحذف نقاط المضلع؟
استخدم زر "+ إضافة نقطة" لإضافة نقطة تحكم جديدة في المركز (50% 50%)، ثم اسحبها أو حرر قيم X/Y. لحذف نقطة، انقر على "− حذف" بجانبها. يتطلب المضلع 3 نقاط على الأقل.
ما الأشكال المسبقة المتاحة؟
تتضمن الأداة 12 إعداداً مسبقاً للمضلع: مثلث، معين، سهم يمين، سهم يسار، خماسي، سداسي، نجمة، شيفرون، انحدار يسار، انحدار يمين، حافة مشطوفة، ونعل.
كيف يعمل clip-path للدائرة؟
يؤدي اختيار نوع شكل الدائرة إلى توليد قيمة clip-path: circle(r% at cx% cy%). يتحكم شريط الانزلاق للنصف القطري في حجم الدائرة، ويحرك مركز X/Y نقطة المركز.
ما الفرق بين الدائرة والقطع الناقص؟
يأخذ clip-path الدائرة نصف قطر واحداً، منتجاً شكل قطع كامل الاستدارة. أما clip-path القطع الناقص فيأخذ قيم نصف قطر X (rx) ونصف قطر Y (ry) منفصلة، مما يتيح إنشاء أشكال بيضاوية.
كيف أنسخ CSS المُولَّد؟
يوجد زران للنسخ في قسم إخراج CSS. "نسخ CSS" ينسخ قاعدة CSS الكاملة مع المحدد .element. "نسخ القيمة" ينسخ فقط قيمة clip-path للصقها في قاعدة موجودة.
هل clip-path مدعوم في جميع المتصفحات؟
CSS clip-path مع الأشكال الأساسية (polygon وcircle وellipse) مدعوم بشكل جيد في جميع المتصفحات الحديثة بما فيها Chrome وFirefox وSafari وEdge، ولا يتطلب بادئات بائع للأشكال الأساسية.
هل يمكنني تحريك أشكال clip-path؟
نعم! يمكن انتقال CSS clip-path وتحريكه بسلاسة بين الأشكال من نفس النوع ونفس عدد النقاط. مثلاً: "transition: clip-path 0.4s ease".
كيف أستخدم clip-path لفواصل الأقسام؟
طبّق clip-path مضلع على عنصر قسم بعرض كامل لإنشاء انتقالات قطرية أو على شكل شيفرون بين أقسام الصفحة. استخدم الإعدادات المسبقة للانحدار الأيسر أو الأيمن كنقطة انطلاق.
ما هو خيار صورة خلفية المعاينة؟
عند تبديل خلفية المعاينة إلى "صورة"، تمتلئ المعاينة بتدرج (نيلي إلى وردي) بدلاً من لون صلب. يساعدك هذا في رؤية كيف سيبدو clip-path عند تطبيقه على صورة أو خلفية غنية.