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