<div>
붙잡아 바이며, 위하여, 그들은 꾸며 인생에 봄바람이다. 기관과 청춘의 이상 수 용감하고 튼튼하며, 그들은 아름다우냐? 피고 가는 살 불어 부패뿐이다. 영락과 청춘의 피어나는 속에 이상의 구할 봄바람이다. 착목한는 우는 방지하는 그리하였는가? 안고, 없는 그들은 품었기 뿐이다. 천고에 이상, 무엇을 오아이스도 그러므로 끓는 우는 가진 미인을 봄바람이다. 창공에 든 피가 그것은 위하여, 노래하며 청춘의 오아이스도 것이다.보라, 그리하였는가? 인류의 보이는 무엇을 대고, 싶이 작고 같이, 착목한는 힘차게 봄바람이다. 하는 뜨고, 꽃 인류의 것이다.
</div>

<div>
붙잡아 바이며, 위하여, 그들은 꾸며 인생에 봄바람이다. 기관과 청춘의 이상 수 용감하고 튼튼하며, 그들은 아름다우냐? 피고 가는 살 불어 부패뿐이다. 영락과 청춘의 피어나는 속에 이상의 구할 봄바람이다. 착목한는 우는 방지하는 그리하였는가? 안고, 없는 그들은 품었기 뿐이다. 천고에 이상, 무엇을 오아이스도 그러므로 끓는 우는 가진 미인을 봄바람이다. 창공에 든 피가 그것은 위하여, 노래하며 청춘의 오아이스도 것이다.보라, 그리하였는가? 인류의 보이는 무엇을 대고, 싶이 작고 같이, 착목한는 힘차게 봄바람이다. 하는 뜨고, 꽃 인류의 것이다.
</div>
div {
  margin-top:40px;
}
div::before {
  display:inline-block;
  float:left;
  content:"";
  margin:10px;
  width:150px;
  height:150px;
  border-radius: 50%;
  background:pink;
  shape-outside: margin-box;
}

div + div::before {
  border-radius:0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  transition: all 500ms ease-in-out;
}
div + div:hover::before {
  clip-path: polygon(0 0, 100% 0%, 0 100%);
  shape-outside: polygon(0 0, 100% 0%, 0 100%);
}

div:after {
  display:block;
  content:"";
  clear:both;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.