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