مولد مسار مقطع CSS

يقبل مسار مقطع CSS وظيفة polygon()‎ المصنوعة من أي عدد من أزواج الإحداثيات x/y، مما يعني أنه يمكنه نحت مربع إلى أشكال أبعد بكثير من المستطيلات والدوائر البسيطة التي يصل إليها معظم الأشخاص. المشكلة هي أن كتابة هذه الإحداثيات يدويًا أمر ممل ويكاد يكون من المستحيل الحصول عليه بشكل صحيح لأي شيء يتجاوز المثلث الأساسي - يقوم هذا المولد بتحويل قائمة الإحداثيات هذه إلى مجموعة من النقاط القابلة للسحب في المعاينة المباشرة، وبالتالي فإن الشكل الذي تراه هو دائمًا الشكل الذي ينتجه CSS.

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

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

قم بتحميل صورتك الخاصة لمعاينة مسار المقطع مقابل محتوى حقيقي بدلاً من مربع عادي، أو قم بتخطي التحميل بالكامل وستعود المعاينة إلى نمط مخطط بحيث يظل الشكل المقطوع مرئيًا بوضوح في كلتا الحالتين. مثل كل أداة على هذا الموقع، يتم تشغيل كل شيء محليًا في المتصفح: لا تترك أي صورة جهازك على الإطلاق، ويستمر المولد في العمل دون اتصال بمجرد تحميل الصفحة.