shape-outside-empty-ellipse-4.html (779B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title>Shape-outside empty horizontal ellipse, with shape-margin acts like a circle (with some aberration)</title> 6 <style> 7 body { 8 line-height: 0; 9 } 10 .container { 11 width: 600px; 12 } 13 box { 14 display: inline-block; 15 background-color: blue; 16 width: 100px; 17 height: 20px; 18 } 19 .shape { 20 float: left; 21 width: 200px; 22 height: 180px; 23 shape-outside: ellipse(50px 0px at 50px 90px); 24 shape-margin: 90px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="container"> 30 <div class="shape"></div> 31 <box></box><br> 32 <box></box><br> 33 <box></box><br> 34 <box></box><br> 35 <box></box><br> 36 <box></box><br> 37 <box></box><br> 38 <box></box><br> 39 <box></box><br> 40 </div> 41 </body> 42 </html>