| <!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> |
