<main class="container">
  <div class="circle"></div>
  <h1>(CIRCLE) How do you like CSS now?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

</main>



<main class="container">
  <div class="polygon"></div>
  <h1>(POLYGON) How do you like CSS now?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

</main>


<main class="container">

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/Brob__Fixed_2.png" alt="" />
  <h1>(IMAGE) How do you like CSS?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

</main>


<main class="container angled">

  <aside class="left"></aside>
  <aside class="right"></aside>

  <h1>(MULTIPLE) How do you like CSS now?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur sollicitudin felis vel gravida. Suspendisse aliquet tellus dictum, faucibus eros vel, mattis orci. Vivamus luctus sed dolor vitae finibus. Nunc in libero non augue egestas molestie id ut sapien.</p>

  
</main>
body {
  background-color: kelly;
}

.container {
  background-color: #fff;
  width: 70%;
  padding: 1%;
  box-sizing: border-box;
  margin: 20px auto;

  &::after {
    content: "";
    clear: both;
  }

  p {

  }
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(50, 255, 100, .5);

  float: left;
  margin: 0 3em .5em 0;
  shape-outside: circle();
  
}

.polygon {
    float: left;
    width: 40%;  
    height:400px;
    shape-outside: polygon(22% 0, 23% 18%, 79% 25%, 90% 36%, 66% 56%, 75% 80%, 28% 101%, 45% 60%, 45% 40%);
}

img {
  float: left;
  shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/brob_mask.png);
  shape-margin: 10px;
}

.angled {
  text-align: justify;
}

.left {
  float:left;
  width: 20%;
  height: 730px;
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

.right {
  float: right;
  width: 20%;
  height: 730px;
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.