مولّد CSS Clip-Path

ما هي هذه الأداة؟

clip-path هي خاصية CSS التي تُخفي كل ما هو خارج منطقة محددة من العنصر، تاركةً الشكل الداخلي فقط مرئيًا — يبقى صندوق العنصر بأكمله موجودًا في التخطيط، لكنه ببساطة لا يُرسم. تقبل هذه الخاصية دوالّ أشكال أساسية مثل circle() وellipse() وinset() وpolygon()، وهذه الأخيرة تأخذ قائمة عشوائية من أزواج إحداثيات x/y لتحديد أي شكل ذي حواف مستقيمة.

إحداثيات polygon() هي الجزء الأصعب في الكتابة اليدوية — فالخماسي والسداسي والنجمة يحتاج كل منها إلى عدة نقاط دقيقة الموضع، وأي خطأ في نقطة واحدة يشوّه الشكل بأكمله. تحسب هذه الأداة تلك الإحداثيات لك من نمط شكل جاهز، وتحدّث المعاينة المباشرة فورًا، وتمنحك كود clip-path الدقيق لنسخه.

المصدر: وحدة أشكال CSS المستوى 1 / وحدة إخفاء CSS المستوى 1، W3C — المواصفات التي تُعرّف clip-path ودوالّ الأشكال الأساسية الخاصة بها.

لماذا تستخدمها؟

• المعاينة المباشرة تقص مربع معاينة فعليًا وفق الشكل المختار، فترى النتيجة الحقيقية بدلًا من تخيّلها من الإحداثيات.
• سبعة أنماط أشكال جاهزة — دائرة، بيضاوي، مثلث، خماسي، سداسي، نجمة، ومستطيل بزوايا مدورة — تغطي الغالبية العظمى من استخدامات clip-path دون كتابة نقاط polygon يدويًا.
• تتضمن أنماط الدائرة والبيضاوي والمستطيل المدور شريط تمرير للحجم/الاستدارة لضبط الشكل بدقة دون تعديل الإحداثيات.
• تُخرج كود clip-path قياسي جاهز للصق على أي عنصر.
• تعمل بالكامل داخل متصفحك — لا يُرفع أي شيء تُعدّه إلى أي مكان. مجانية، بلا تسجيل، وتعمل على الجوال.

كيفية الاستخدام

1. اختر شكلًا من القائمة المنسدلة — دائرة، بيضاوي، مثلث، خماسي، سداسي، نجمة، أو مستطيل بزوايا مدورة.
2. بالنسبة لأشكال الدائرة والبيضاوي والمستطيل المدور، اضبط شريط تمرير الحجم/الاستدارة لضبط القص بدقة.
3. راقب تحديث مربع المعاينة مباشرة أثناء تغيير الشكل أو شريط التمرير.
4. انسخ كود clip-path الناتج والصقه على العنصر الذي تريد قصه.
5. لصورة بدلًا من لون صلب، طبّق نفس خاصية clip-path على عنصر <img> أو عنصر يحمل background-image.

مثال

الإدخال

الشكل: سداسي

الناتج

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

قص سداسي منتظم، يُستخدم عادةً لصور الملف الشخصي بأسلوب الشارة أو أيقونات الميزات.

الأشكال الأساسية مقابل polygon()

الدائرة والبيضاوي وinset (المستطيل المدور) هي دوالّ أشكال أساسية مدمجة في CSS بصياغة بسيطة خاصة بها — نصف قطر أو اثنان، مع موضع مركز اختياري أو استدارة زوايا. أما المثلث والخماسي والسداسي والنجمة فليست أشكالًا مدمجة؛ يُعبَّر عنها جميعًا باستخدام polygon()، وهي قائمة مسطحة من أزواج إحداثيات x/y ترسم محيط الشكل. تحسب هذه الأداة تلك الإحداثيات تلقائيًا لمضلعات منتظمة (متساوية التباعد) ولنجمة خماسية الرؤوس، وهو الجزء الشاق الذي يصعب ضبطه يدويًا.

أنماط clip-path الشائعة

• صورة رمزية دائرية أو شارة: circle() بنصف قطر متوسط، غالبًا مع صورة مصدر مربعة حتى لا تتمدد الدائرة إلى بيضاوي.
• فاصل قسم مائل: مضلّع مخصص (غير مدرج كنمط جاهز هنا) يُميّل الحافة العلوية أو السفلية لقسم بعرض كامل لإحداث فاصل صفحة غير مستطيل.
• شكل شارة أو أيقونة تقييم نجمي: نمط النجمة، مفيد كشكل زخرفي بدلًا من رسم SVG يدوي في الحالات البسيطة.
• شبكة صور سداسية: صور مقصوصة بشكل سداسي مرتبة في تخطيط خلية نحل، نمط شائع في صفحات المحفظة/الفريق.
• المستطيل المدور كبديل خفيف عن border-radius عندما تحتاج إلى أن يقص الشكل أيضًا المحتوى الفرعي الفائض، إذ إن border-radius وحدها لا تقص العناصر الفرعية دون overflow:hidden إضافي.

الدمج مع أدوات CSS أخرى

غالبًا ما تُدمج clip-path مع تدرج CSS كخلفية يتم قصها، أو مع box-shadow مطبقة على عنصر لفّ خارجي (لأن clip-path تقص أيضًا ظل العنصر نفسه، فإن تطبيق ظل على عنصر أب هو الحل المعتاد للحصول على شكل مقصوص يبدو مع ذلك عائمًا).

→ Border Radius Generator · Box Shadow Generator

الأسئلة الشائعة