الخاصية 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 على الإنترنت تساعدك على رسم الشكل ونسخ الكود.