<!DOCTYPE html>
<html>
<head>
<style>
    #content {
        font: 25px / 1 Ahem, sans-serif;
        color: green;
        text-align: right;
    }

    #image-shape {
        float: right;
        -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'><rect width='100' height='100' fill='green'/></svg>");
        -webkit-shape-margin: 100px; /* overflow the margin box */
        width: 100px;
        height: 100px;
        margin: 25px;
        background-color: blue;
    }
</style>
</head>
<body>
  <p>The green rectangles should wrap around the blue 100x100 rectangle and a 25 pixel margin.</p>
  <div id="content">
      <div id="image-shape"></div>
      X<br>X<br>X<br>X<br>X<br>X<br>X
  </div>
</body>
</html>