CSS Shapes example

by Julien Etienne

HTML

<div class="circle"></div>
<article>
  <h1>CSS Shapes</h1>
  <p>
    <!-- start slipsum code -->
    Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put
    quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.
    <!-- end slipsum code -->
  </p>
</article>

CSS

.circle {
  float: left;
  height: 10rem;
  width: 10rem;
  shape-outside: circle();
  background: radial-gradient(farthest-corner at 30% 30%, crimson 0%, darkblue 100%);
  border-radius: 100%;
  margin: 1rem 1rem 1rem 2rem;
}

article {
  width: 25rem;
  border: 0.1rem solid black;
  padding: 1rem;
}

h1 {
  margin: 0;
}

p {
  font-family: sans-serif;
  line-height: 1.25;
}