Star Sharp Clip Path CSS

Star Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

clip-path

Editable Shape

Output

Copy-ready CSS

Pure CSS

clip-path: polygon(50% 0%, 63% 33.8%, 100% 33.8%, 70.5% 56.5%, 84.6% 100%, 50% 73.8%, 15.4% 100%, 29.5% 56.5%, 0% 33.8%, 37% 33.8%);

Tailwind v4

[clip-path:polygon(50%_0%\,_63%_33.8%\,_100%_33.8%\,_70.5%_56.5%\,_84.6%_100%\,_50%_73.8%\,_15.4%_100%\,_29.5%_56.5%\,_0%_33.8%\,_37%_33.8%)]

Try it in the generator

When to use it

Star Sharp is a star clip-path preset for interface shapes, cropped media blocks, section edges, and decorative CSS cuts. It uses 10 polygon points, which keeps the effect readable while still giving the element a custom silhouette. Star Sharp is a dramatic decorative silhouette for CSS clip-path layouts. The preset is written as plain CSS, so it works with images, cards, gradient panels, and pseudo-elements without requiring SVG assets. Use it when a rectangular block feels too flat, or when a star shape needs to guide attention across a page. Open it in the generator to drag individual vertices, switch templates, and copy the updated clip-path or Tailwind arbitrary value.

Hexpedia