OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <style> | 3 <style> |
4 .container { | 4 .container { |
5 font: 50px/1 Ahem, sans-serif; | 5 font: 50px/1 Ahem, sans-serif; |
6 color: green; | 6 color: green; |
7 } | 7 } |
8 | 8 |
9 .shape-outside { | 9 .shape-outside { |
10 width: 100px; | 10 width: 100px; |
11 height: 100px; | 11 height: 100px; |
12 float: left; | 12 float: left; |
13 shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/20
00/svg' width='100px' height='100px'><rect x='0' y='50' width='49' height='49' f
ill='blue'/></svg>"); | 13 shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/20
00/svg' width='100px' height='100px'><rect x='0' y='50' width='50' height='50' f
ill='blue'/></svg>"); |
14 } | 14 } |
15 </style> | 15 </style> |
16 <script> | 16 <script> |
17 window.onload = function() { | 17 window.onload = function() { |
18 var container = document.querySelector('.container'); | 18 var container = document.querySelector('.container'); |
19 var shape = document.createElement('div'); | 19 var shape = document.createElement('div'); |
20 shape.className = 'shape-outside'; | 20 shape.className = 'shape-outside'; |
21 container.insertBefore(shape, container.firstChild); | 21 container.insertBefore(shape, container.firstChild); |
22 } | 22 } |
23 </script> | 23 </script> |
24 </head> | 24 </head> |
25 <body> | 25 <body> |
26 <div class='container'> | 26 <div class='container'> |
27 <p>X<br>X<br>X</p> | 27 <p>X<br>X<br>X</p> |
28 </div> | 28 </div> |
29 </body> | 29 </body> |
30 </html> | 30 </html> |
31 | |
OLD | NEW |