shape-outside-007-ref.html (1918B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Reference File</title> 5 <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style type="text/css"> 8 #container { 9 position: absolute; 10 top: 70px; 11 width: 260px; 12 height: 120px; 13 font-family: Ahem; 14 font-size: 20px; 15 line-height: 1.5em; 16 border: 1px solid black; 17 padding-left: 2px; 18 } 19 #margin-line { 20 position: absolute; 21 top: 100px; 22 width: 263px; 23 border-bottom: 1px solid black; 24 } 25 .bar { 26 position: absolute; 27 height: 20px; 28 background-color: green; 29 } 30 #bar-1 { 31 top: 5px; 32 width: 240px; 33 } 34 #bar-2 { 35 top: 35px; 36 width: 240px; 37 } 38 #bar-3 { 39 top: 65px; 40 left: 22px; 41 width: 220px; 42 } 43 #bar-4 { 44 top: 95px; 45 left: 52px; 46 width: 200px; 47 } 48 #triangle { 49 position: absolute; 50 top: 90px; 51 width: 100px; 52 height: 100px; 53 background-color: lightblue; 54 margin-left: 2px; 55 clip-path: polygon(0% 50%, 50% 100%, 0 100%);; 56 } 57 </style> 58 </head> 59 <body> 60 <p> 61 The test passes if one green bar is inside the top rectangle, three green bars 62 are in the bottom rectangle, and none intersect the triangle. There should be no red. 63 </p> 64 <div id="container"> 65 <div id="bar-1" class="bar"></div> 66 <div id="bar-2" class="bar"></div> 67 <div id="bar-3" class="bar"></div> 68 <div id="bar-4" class="bar"></div> 69 </div> 70 <div id="margin-line"></div> 71 <div id="triangle"></div> 72 </body> 73 </html>