مُنشئ clip-path في CSS
أنشئ أشكال clip-path بصرياً عبر نقاط قابلة للسحب يعمل على جهازك — لا يُرفع شيء ولا يُخزَّن شيء.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
انقر على أي شكل لتحميله كمضلّع قابل للتعديل.
تبني هذه الأداة قيم CSS الخاصة بالخاصية clip-path بصريًا. اختر شكلًا (مضلّع أو دائرة أو قطع ناقص أو إزاحة داخلية) فيتغير المربع المعروض فور تعديلك. وفي المضلّع تسحب النقاط المرقّمة مباشرة على المعاينة، أو تضبط إحداثيَّي X وY لكل نقطة بالمنزلقات، أو تضيف نقاطًا أو تحذفها حتى حد أدنى قدره ثلاث نقاط. وتتوفر ثمانية أشكال جاهزة بنقرة واحدة: مثلث ومعيّن ومخمّس ومسدّس ونجمة وفقاعة رسالة وسهم وشيفرون.
تأخذ الدائرة والقطع الناقص نصف قطر ومركزًا، وتأخذ الإزاحة الداخلية قيم الأعلى واليمين والأسفل واليسار مع نصف قطر اختياري للزوايا. كل القيم نسب مئوية من صندوق العنصر، فيتناسب الشكل مع حجمه. وتعرض لوحة الإخراج التصريح الكامل مع سطر -webkit-clip-path لمتصفح سفاري القديم، وزر نسخ.
- اختر مضلّعًا أو دائرة أو قطعًا ناقصًا أو إزاحة داخلية.
- اسحب النقاط على المعاينة أو استخدم المنزلقات والأشكال الجاهزة لتشكيله.
- راجع المعاينة الحية ثم انسخ شيفرة CSS من لوحة الإخراج.
- الصقها في قاعدة عنصرك.
- المعاينة مربع بتدرّج لوني ثابت وليست صورتك أو عنصرك. انسخ الشيفرة وجرّبها على العنصر الحقيقي، خصوصًا إن لم يكن مربعًا.
- القيم نسب مئوية فقط. لا تولّد الأداة قيمًا بالبكسل ولا الدالة path() ولا مراجع SVG.
- تتقيّد نقاط المضلّع بأعداد صحيحة من النسب عند السحب، ويحتاج المضلّع إلى ثلاث نقاط على الأقل.
- إزاحات الشكل الداخلي ونصف قطر الزوايا تتوقف عند 50%، أما أحجام الدائرة والقطع الناقص فتصل إلى 100%.