css-shapes-1/examples/stacked-float-example.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>stacking shapes with margins example</title>
  <!-- lots of hacks to get this to work with the old shape positioning -->
  <style>
    body {
      width: 250px;
    }
    .shape {
      float: left;
      width: 100px;
      height: 50px;
      background-color: lightblue;
      -webkit-shape-outside: polygon(0px 0px, 50px 50px, 0px 50px);
      -webkit-clip-path: polygon(0px 0px, 50px 50px, 0px 50px);
    }
    p {
      margin: 0;
    }
    .content-area {
      position: absolute;
      top: 28px;
      width: 100px;
      height: 100px;
      background-color: #B29BA3;
      z-index: -1;
    }
    .margin-area {
      position: absolute;
      width: 100px;
      height: 20px;
      background-color: #FFF7A5;
      z-index: -1;
    }
    .first {
      height: 120px;
      -webkit-shape-outside: polygon(0px 70px, 50px 120px, 0px 120px);
      -webkit-clip-path: polygon(0px 70px, 50px 120px, 0px 120px);      
    }
    .second {
      left: 108px;
    }
    .second.margin-area {
      top: 28px;
    }
    .second.content-area {
      top: 48px;
    }
  </style>
</head>
<body lang="en">
  <div class="margin-area"></div>
  <div class="content-area"></div>
  <div class="second margin-area"></div>
  <div class="second content-area"></div>
  <div class="first shape"></div>
  <p>When floats with shapes are stacked, the margin box is used for the stacking. Other inline content is only constrained by the shapes themselves and will run through the open content area and <div class="shape"></div> margins outside the shape.</p>
</body>
</html>