OLD | NEW |
(Empty) | |
| 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 <style type="text/css"> |
| 7 #container { |
| 8 position: absolute; |
| 9 top: 70px; |
| 10 width: 250px; |
| 11 height: 105px; |
| 12 border: 1px solid black; |
| 13 } |
| 14 .bar { |
| 15 position: absolute; |
| 16 height: 20px; |
| 17 background-color: green; |
| 18 } |
| 19 #line-1 { |
| 20 top: 10px; |
| 21 left: 65px; |
| 22 width: 160px; |
| 23 } |
| 24 #line-2 { |
| 25 top: 40px; |
| 26 left: 80px; |
| 27 width: 140px; |
| 28 } |
| 29 #line-3 { |
| 30 top: 70px; |
| 31 left: 95px; |
| 32 width: 120px; |
| 33 } |
| 34 #triangle { |
| 35 position: absolute; |
| 36 top: 70px; |
| 37 width: 100px; |
| 38 height: 100px; |
| 39 background-color: lightblue; |
| 40 clip-path: polygon(50px 0px, 100px 100px, 0px 100px); |
| 41 } |
| 42 </style> |
| 43 </head> |
| 44 <body> |
| 45 <p> |
| 46 The test passes if all there are three green horizontal bars to the righ
t of the |
| 47 triangle that are all inside the rectangle and there should be no green
to the left |
| 48 of the triangle. There should be no red. |
| 49 </p> |
| 50 <div id="container"> |
| 51 <div id="line-1" class="bar"></div> |
| 52 <div id="line-2" class="bar"></div> |
| 53 <div id="line-3" class="bar"></div> |
| 54 </div> |
| 55 <div id="triangle"></div> |
| 56 </body> |
| 57 </html> |
OLD | NEW |