طريقة الاستخدام
- اكتب اسم الفئة للقاعدة، مثل triangle، واختر الشكل.
- للشكل polygon، اسحب نقطة في المعاينة، أو اكتب قيمة x وy في حقولها. استعمل إضافة نقطة وحذف آخر نقطة لتغيير عددها.
- للشكل inset أو circle أو ellipse، اكتب الأرقام في الحقول. تُرسم المعاينة من جديد فوراً.
- انسخ قاعدة CSS إلى ملف الأنماط، وضعها على العنصر الذي تريد قصّه.
الأشكال الأربعة
تعرّف وحدات الأشكال في CSS (باللغة الإنجليزية) الأشكال الأساسية التي تقبلها clip-path. المضلع قائمة من النقاط، وكل نقطة زوج من الموضعين، وتُوصل النقاط بالترتيب الذي تكتبه به. أما inset فيقطع الصندوق عند أربع مسافات مكتوبة بالترتيب: الأعلى ثم اليمين ثم الأسفل ثم اليسار. وللدائرة أو للبيضاوي نصف قطر أو نصفا قطر، ويُكتب مركزه بعد الكلمة at.
- polygon(50% 0%, 100% 100%, 0% 100%) له ثلاث نقاط، ولكل منها x وy بالنسبة المئوية.
- inset(10% 20% 10% 20%) يقطع 10٪ من الأعلى والأسفل، و20٪ من اليمين واليسار.
- circle(60px at 50% 50%) نصف قطره 60 px، ومركزه في منتصف الصندوق.
النسب والصندوق المرجعي
النسبة المئوية في النقطة أو المسافة أو المركز هي نصيب من الصندوق، وتحسبها المواصفة من حجم الصندوق المستعمل فعلياً. وتنص وحدات الإخفاء في CSS (باللغة الإنجليزية) على أن صندوق الحدود هو الصندوق المرجعي إذا لم يُذكر غيره. ولا يُرسم جزء العنصر الواقع خارج الشكل.
ما لا يكتبه المولّد
- قاعدة التعبئة (fill rule) للمضلع، وعبارة round في inset، وصيغتا url() وpath() في clip-path.
- نصف القطر بالنسبة المئوية للدائرة أو للبيضاوي. فنص المواصفات الذي قرأه المولّد لا يبيّن طريقة حسابها، لذلك تُكتب الأنصاف بالبكسل.
مثال محلول: مثلث
المثلث مضلع من ثلاث نقاط: منتصف الأعلى، وأسفل اليمين، وأسفل اليسار من الصندوق. يعطي الجدول كل نقطة، والقاعدة التي يكتبها المولّد هي .triangle مع clip-path مضبوطة على polygon(50% 0%, 100% 100%, 0% 100%).
| النقطة | x | y |
|---|---|---|
| 1 | 50٪ | 0٪ |
| 2 | 100٪ | 100٪ |
| 3 | 0٪ | 100٪ |
الأسئلة الشائعة
لماذا تُكتب أنصاف الأقطار للدائرة والبيضاوي بالبكسل؟
لا يبيّن نص المواصفات طريقة حساب النسبة المئوية لنصف القطر في circle() وellipse()، لذلك يعرض المولّد البكسل وحده. والبكسل له معنى واحد، وترسمه المعاينة بالحجم الذي يظهر على شاشتك.
لماذا يختفي الشكل عندما أكتب قيمة خاطئة؟
يعرض المولّد سبب الخطأ بالأحمر ولا يرسم الشكل، حتى لا يعطيك قاعدة خاطئة أبداً. والأسباب المعتادة قيمة خارج نطاقها، أو مسافات داخلية لا تترك أي جزء من الصندوق.
هل يهم ترتيب النقاط؟
نعم. تُكتب النقاط بالترتيب الذي تضعها به، وهذا الترتيب يرسم الخط الخارجي للشكل. وتغيير نقطة واحدة يغيّر الشكل دون أن يغيّر النقاط الأخرى.
ما الفرق بين clip-path وborder-radius؟
يقصّ clip-path العنصر إلى شكل، فلا يُرسم الجزء الخارج عنه، بينما يستدير border-radius الزوايا فقط. والصندوق المرجعي للخاصية clip-path هو صندوق الحدود إلا إذا حُدّد غيره.
كم عدد النقاط التي يقبلها المضلع هنا؟
من 3 إلى 20 نقطة. النقاط الأكثر تعطي خطاً خارجياً أدق، لكنها تطيل القاعدة، والمعاينة تعمل مع 20 مقبضاً كحد أقصى.
هل يُرسل الكود الذي أصنعه إلى أي خادم؟
لا. تُنشأ المعاينة والقاعدة داخل متصفحك، ولا يُخزَّن شيء ولا يُرسل إلى خادمنا. انسخ قاعدة CSS قبل أن تغادر الصفحة.
المصادر
- W3C: CSS Shapes Module Level 1، الأشكال الأساسية (باللغة الإنجليزية)
- W3C: CSS Masking Module Level 1، خاصية clip-path (باللغة الإنجليزية)
آخر مراجعة للأرقام والنص: الخميس، 2 جمادى الآخرة 1448 بعد الهجرة.