شبكة تعلم مع ناو

كيف أرسم شكل نجمة بـ CSS؟ (clip-path)

الخاصية clip-path مع polygon() تقص العنصر حسب نقاط تحددها، فيظهر بالشكل الذي ترسمه النقاط. هذه النقاط ترسم نجمة خماسية:

div {
  width: 200px;
  height: 200px;
  background: gold;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

كل نقطة مكتوبة كـ x y بالنسبة المئوية من عرض العنصر وارتفاعه. عشر نقاط: خمس رؤوس للنجمة وخمس زوايا داخلية.

أشكال أخرى

clip-path: circle(50%);                          /* circle */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  /* triangle */

أداة Clippy على الإنترنت تساعدك على رسم الشكل ونسخ الكود.

اختبر نفسك

خمسة أسئلة سريعة، مع الإجابة والشرح بعد كل سؤال.