CSS octagon

After creating the CSS Diamond I tried to replicate this Dribbble. I created a list item for each petal. They are all ovals with transparent border-left and border-right and then rotated respectively.

See the Pen Octagon by Katy DeCorah (@katydecorah) on CodePen

Nothing super complicated here. It’s the magic of border-radius and some transparent/opaque colors.

I starting playing around with the animation and was pleased with my result. If you view on CodePen the animation is infinite.