مولّد clip-path

كيف يعمل

يقتطع clip-path عنصرًا إلى مخطط. أي شيء خارج الشكل لا يُرسم ولا يمكن النقر عليه، مما يجعله شكلًا حقيقيًا لا صورة لشكل — وهو يعمل على أي عنصر، بما فيه الصور والفيديو.

نسب مئوية، لا بكسلات

تُعطى نقاط المضلع كنسب مئوية من عرض العنصر وارتفاعه، فيتمدد الشكل مع العنصر بدلًا من أن يتعطل عند حجم مختلف. وهذا ما يجعله صالحًا للاستخدام في تخطيط متجاوب.

النقرات تتبع الشكل

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

التحريك بين الأشكال

لا يمكن لمضلع أن ينتقل بسلاسة إلى مضلع آخر إلا إذا ذكر كلاهما العدد نفسه من النقاط. والحيلة المعتادة أن يُضاف إلى الشكل الأبسط نقاط مكررة لتتطابق الأعداد — فمثلث مكتوب بأربع نقاط، اثنتان منها في المكان نفسه، يستطيع التحول إلى مربع.

سطر -webkit-

لا تحتاج المتصفحات الحالية إلا إلى الخاصية دون بادئة. وتُدرج النسخة ذات البادئة لأن بعض إصدارات Safari الأقدم لا تزال تتطلبها، ولا يكلّف إبقاؤها شيئًا.

ما لا يفعله

يقتطع؛ ولا يعيد التدفق. لا يزال النص المحيط يعامل العنصر كمستطيله الأصلي. ولجعل النص يلتف حول شكل فأنت تريد shape-outside، الذي يستخدم الصياغة نفسها.