الأدوات · CSS · مولّد clip-path
مولّد clip-path
أنشئ شكل قصّ CSS (clip-path) - مضلع أو دائرة أو بيضاوي أو مستطيل داخلي - مع معاينة حيّة، وانسخ الكود.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اختر نوع الشكل (مضلع أو دائرة أو بيضاوي أو مستطيل داخلي)، أو اختر شكلًا جاهزًا.
اسحب النقاط على المعاينة، أو استخدم أشرطة التمرير، لضبط الشكل.
انسخ كود clip-path الناتج.
أسئلة شائعة
لا. الشكل يُولَّد ويُعرَض بالكامل داخل متصفحك - هذه مجرد رياضيات ونص CSS.
نعم. افتح إحداثيات النقاط واستخدم إضافة نقطة - تقسم أطول ضلع - أو زر الحذف في أي صف. يحتفظ المضلع بثلاث نقاط على الأقل.
بعض التركيبات - مثل مستطيل داخلي يغطي الصندوق بالكامل - كود CSS صالح يقصّ كل شيء. ليس خطأ، بل قيمة قانونية لكنها متطرفة.
نعم. انتقل إلى نقطة بمفتاح Tab واستخدم مفاتيح الأسهم لتحريكها - مع Shift لخطوة أكبر.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why Shape Elements With CSS clip-path Instead of Cropped Images
A hexagon avatar or an angled hero can be baked into the image file, or cut by the browser at render time. clip-path does the cutting in CSS, which keeps one source image and one line to change, with a few side effects worth knowing first.
اقرأ الدليلHow to Build a CSS clip-path Polygon by Dragging Points
Start from one of eight presets, drag the points into place, add or remove points as the shape needs, and copy a polygon() value that scales with any box. Here is the process, with the limits the tool actually has.
اقرأ الدليلMaking a Hexagon Profile Photo With CSS clip-path
A hexagon avatar looks like one line of CSS, then the hexagon comes out squashed, the border vanishes on four sides and the shadow is gone. Here is the whole job, including the three fixes.
اقرأ الدليل
التعليقات