Clip Paths

Shape any element with the clip= attr. Uses pure CSS clip-path — no SVG, no images.

Basic shapes

Circles & polygons

circle

ellipse

diamond

triangle

hex

pentagon

star

<div clip="circle">…</div>
<div clip="diamond">…</div>
<div clip="hex">…</div>
<div clip="star">…</div>

Decorative shapes

Arrows, chevrons & ribbons

arrow →

← arrow-left

chevron

ribbon

notch

<div clip="arrow">Arrow right</div>
<div clip="chevron">Chevron badge</div>
<div clip="ribbon">Ribbon label</div>
<div clip="notch">Notch corner</div>

Image cropping

Clip an image to a shape

<!-- Works on images too -->
<img src="photo.jpg" clip="circle" style="width:120px;height:120px;object-fit:cover;" />
<img src="photo.jpg" clip="hex" style="width:120px;height:120px;object-fit:cover;" />

All values

clip="circle|ellipse"
clip="diamond|triangle|triangle-down|triangle-left|triangle-right"
clip="hex|hex-wide|pentagon|star|star-4"
clip="arrow|arrow-left|chevron|ribbon|notch|notch-left"

<!-- Notch size token -->
--aura-notch-size: 20px