مطور / أشكال CSS

مولّد مسار القص في CSS: مضلع ودائرة وقطع ناقص وإدراج

أنشئ قصاصات في CSS باستخدام ستة إعدادات مسبقة للمضلعات، ونقاط قابلة للسحب والضبط بمفاتيح الأسهم، وأدوات للتحكم في الدائرة والقطع الناقص والإدراج. عاين تدرجًا لونيًا أو صورة محلية، وانسخ CSS بالنسب المئوية أو بالبكسل.

مولّد مسار القص في CSS: مضلع ودائرة وقطع ناقص وإدراج: يقتصر العرض على الشكل المحدد دون تغيير ملف الصورة الأساسي. يتبع الإخراج بالنسب المئوية أبعاد العنصر. يستخدم الإخراج بالبكسل العرض والارتفاع المرجعيين؛ ويتغير حجم المعاينة لتناسب شاشتك. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات المطورين
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
أداة اختبار أشكال مسار القصمعالجة محلية

تعمل بالكامل في المتصفح

اسحب نقطة مرقمة، أو استخدم مفاتيح الأسهم الخاصة بها، أو أدخل الإحداثيات. الإحداثيات أدناه نسب مئوية، ويستخدم إخراج البكسل الحجم المرجعي.

النقطة 1
النقطة 2
النقطة 3
النقطة 4
النقطة 5
النقطة 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

يتغير حجم الأشكال بالنسبة المئوية مع العنصر. تستخدم نسب الدائرة القطر المُطبَّع؛ وتستخدم نسب القطع الناقص العرض والارتفاع. تكون إحداثيات البكسل ثابتة وفق الأبعاد المرجعية.

قص CSS

clip-path في MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . يغيّر القص المنطقة المرئية دون تغيير صندوق تخطيط العنصر.

إحداثيات الأشكال الأساسية

الأشكال الأساسية في CSS Shapes Level 1 من W3C: https://www.w3.org/TR/css-shapes-1/#basic-shapes . تُحسب إحداثيات المضلعات وأنصاف أقطار القطع الناقص بالنسبة إلى الصندوق المرجعي، بينما تستخدم النسب المئوية للدائرة قطره المعياري. الإحداثيات الجاهزة والتدرج عمل فني أصلي.

طريقة الاستخدام

  1. اختر شكلًا وإعدادًا مسبقًا، ثم حدّد الأبعاد المرجعية.
  2. اسحب نقاط المضلع، أو استخدم مفاتيح الأسهم، أو عدّل الإحداثيات؛ واضبط عناصر التحكم للأشكال الأخرى.
  3. اختر الإخراج بالنسب المئوية أو بالبكسل، ثم انسخ CSS.

الخصوصية والقيود

تبقى معاينات الصور الاختيارية على جهازك. لا يتم تحميل أي شيء.

أدوات ذات صلة

شبكة CSSظل الصندوقFlexbox

الأسئلة الشائعة

كيف أعدّل نقطة من دون سحبها؟

ركّز على مقبضها المرقّم واستخدم مفاتيح الأسهم، أو أدخل نسبتي X وY في قائمة النقاط. تحتاج المضلعات إلى ثلاث نقاط على الأقل.

هل يصدّر هذا صورة مقصوصة؟

لا. يصدّر CSS لعنصر HTML. الصورة المحلية للمعاينة فقط.

كيف تُقاس النسب المئوية للدائرة؟

يستخدم CSS القطر الطبيعي، الجذر التربيعي لـ((العرض تربيع + الارتفاع تربيع) / 2)، بوصفه مرجعًا لنصف قطر الدائرة. أما أنصاف أقطار القطع الناقص فتستخدم العرض والارتفاع كلٌّ على حدة.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا