CSS octagon

code × August 1, 2013

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

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.

Nothing super complicated here. It’s just 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.

CSS diamond Font Awesome Buttons