<!DOCTYPE html>
<style>
.container {
    width: 400px;
    text-align: right;
    font: 50px/1 Ahem, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: rgba(0, 255, 0, 0.5);
}

.shape {
    float: right;
    width: 200px;
    height: 200px;
    -webkit-shape-outside: content-box polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
    background-image: url("data:image/svg+xml;UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><polygon points='0,0 200,0 200,200 100,200 100,100, 0,100' fill='blue'/></svg>");
}
</style>
<p>The green rectangles should wrap around the left edge of the blue shape.</p>
<div class='container'>
    <div class='shape'></div>
    X<br>X<br>X<br>X<br>X
</div>