Skip to main content

A Modern way to create an octagon shape

An easy and modern way to create Octagon shapes

CSS-only octagon shapes

.octa {
width: 200px;

aspect-ratio: 1;
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.

More CSS Shapes: