CSS: Day 53

Today is going to be about shape outside where the text will wrap to the shape and this time we are experimenting with the circle shape.

Text forming a circle shape and wrapping to a circle

To make the text wrap around the text, one would need height, width and float.

&__shape {
    height: 10rem;
    width: 10rem;
    background: darkgray;
    shape-outside: circle(50%);
    clip-path: circle(50%);
    float: left;
    transform: translateX(-2rem);
  }

Translate was use here to create space between the floated items.