مولّد Clip-Path

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

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

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

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