Skip to main content
CSS Tip

A Modern way to create octagon shapes

An easy and modern way to create Octagon shapes

CSS-only octagon shapes

.octa {
width: 200px;

aspect-ratio: 1;
--o:calc(50%*tan(-22.5deg));
clip-path: polygon(
var(--o) 50%,50% var(--o),
calc(100% - var(--o)) 50%,
50% calc(100% - var(--o))
);
}

See the Pen CSS-only octagon shapes (the modern way) by Temani Afif (@t_afif) on CodePen.