A Modern way to create an octagon shape

January 16, 2024

An easy and modern way to create Octagon shapes

Only 2 CSS declarations
No magic numbers
A 4-point polygon (instead of 8) for the clip-path

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.

More CSS Shapes: css-shape.com

Previous CSS Tip
Next CSS Tip