Arrow Left Compact Clip Path CSS

Arrow Left Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

clip-path

Editable Shape

Output

Copy-ready CSS

Pure CSS

clip-path: polygon(86% 28.4%, 41.4% 28.4%, 41.4% 14%, 14% 50%, 41.4% 86%, 41.4% 71.6%, 86% 71.6%);

Tailwind v4

[clip-path:polygon(86%_28.4%\,_41.4%_28.4%\,_41.4%_14%\,_14%_50%\,_41.4%_86%\,_41.4%_71.6%\,_86%_71.6%)]

Try it in the generator

When to use it

Arrow Left Compact is a arrow-left clip-path preset for interface shapes, cropped media blocks, section edges, and decorative CSS cuts. It uses 7 polygon points, which keeps the effect readable while still giving the element a custom silhouette. Arrow Left Compact is a tight badge-like shape for small UI accents 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 arrow 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.

Explore more