clip-path مع polygon() وcircle()
قصّ العناصر إلى أشكال مخصّصة متعددة الأضلاع أو دائرية باستخدام الخاصية clip-path
clip-path مع polygon() وcircle() درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو clip-path؟
تقصّ clip-path المساحة المرئية لعنصر لتطابق شكلًا محددًا. وكل ما يقع خارج الشكل يصبح غير مرئي، لكنه يظل يشغل مساحة في التخطيط.
clip-path: circle()
اقصص عنصرًا على شكل دائري. والوسيط هو نصف القطر:
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
اقصص العنصر على شكل قطع ناقص عبر تحديد نصف القطر على المحور x ونصف القطر على المحور y، مع إمكانية تحديد موضع المركز:
<div class="card-image"></div>
clip-path: polygon()
أقوى أشكال clip-path. عرّف مضلعًا عبر سرد أزواج إحداثيات x,y:
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
اقصص العنصر على شكل مستطيل مع إمكانية تدوير زواياه. والوسائط هي مسافات الإدراج:
<div class="card"></div>
استخدام Clip-path لأشكال الأقسام
أنشئ انتقالات مائلة بين أقسام الصفحة:
<div class="section-diagonal">Diagonal Section</div>
تحريك clip-path
يمكن تنفيذ انتقالات بين قيم clip-path التي تحتوي على العدد نفسه من النقاط لإنشاء تحريكات للكشف والتحوّل:
<div class="reveal visible"></div>
clip-path مقابل border-radius
للأشكال المستديرة البسيطة، يكون border-radius أفضل — فهو يعمل مع الخلفية والحدود. استخدم clip-path عندما تحتاج إلى أشكال غير مستطيلة لا يمكن لـ border-radius تحقيقها.
clip-path: path()
تقبل path() سلسلة مسار SVG لإنشاء أشكال عشوائية:
<div class="star"></div>
اعتبارات الأداء
ينشئ clip-path سياق تكديس جديدًا، وقد يؤدي إلى إعادة الرسم في كل إطار عند تحريكه. ويُعد تحريك clip-path أكثر تكلفة من transform أو opacity، لذا استخدمه بحذر معهما.
المربع المرجعي لـ clip-path
يكون نظام الإحداثيات الخاص بـ clip-path هو مربع حدود العنصر، أو مربع الهامش في حالة SVG. وتكون النسب المئوية نسبية إلى أبعاد العنصر.
تحقّق سريعًا
أي دالة من دوال clip-path تنشئ شكلًا غير منتظم وغير مستطيل محددًا بأزواج من الإحداثيات؟
مراجعة
تقصّ clip-path العناصر لتطابق أشكالًا هندسية. وتنشئ circle() وellipse() أشكال قص مستديرة. وتحدّد polygon() أي شكل متعدد الرؤوس. وتقصّ inset() العنصر على شكل مستطيل مع إمكانية تدوير زواياه. حرّك العناصر بين أشكال polygon التي لها العدد نفسه من النقاط لإنشاء تأثيرات كشف لافتة. واستخدم path() لإنشاء أشكال عشوائية مستندة إلى SVG.
الأسئلة الشائعة
هل درس «clip-path مع polygon() وcircle()» مجاني؟
نعم — نص درس «clip-path مع polygon() وcircle()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «clip-path مع polygon() وcircle()»؟
قصّ العناصر إلى أشكال مخصّصة متعددة الأضلاع أو دائرية باستخدام الخاصية clip-path تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «clip-path مع polygon() وcircle()»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- clip-path مع polygon() وcircle()
- shape-outside لالتفاف النص
- تحريك أشكال clip-path
- أقنعة CSS مقابل clip-path