<!DOCTYPE html>
<html>
<head>
<style>
    #content {
        font: 50px/1 Ahem, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: green;
        width: 300px;
        border: 1px solid black;
    }
    #right-shape {
        float: right;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin-left: 50px; /* effectively overridden by shape-outside */
        shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
    }
    #left-shape {
        float: left;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin-right: 50px; /* effectively overridden by shape-outside */
        shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
    }
</style>
</head>
<body>
  <p>The blue squares on the left and right should be surrounded by three green squares.</p>
  <div id="content">
      <div style="text-align: right">
        X<br>
        <div id="right-shape"></div>
        X<br>X
      </div>
      X<br>
      <div id="left-shape"></div>
      X<br>X
  </div>
</body>
</html>