| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style type="text/css"> | |
| 5 .greenSquare { | |
| 6 position: absolute; | |
| 7 top:50px; | |
| 8 left:50px; | |
| 9 width: 100px; | |
| 10 height: 100px; | |
| 11 border-bottom-right-radius: 50px 50px; | |
| 12 border-top-left-radius: 50px 50px; | |
| 13 background-color: green; | |
| 14 } | |
| 15 | |
| 16 .yellowSquare { | |
| 17 position: absolute; | |
| 18 top: 20px; | |
| 19 left: 250px; | |
| 20 width: 120px; | |
| 21 height: 120px; | |
| 22 border-top-right-radius: 60px 60px; | |
| 23 border-bottom-left-radius: 70px 60px; | |
| 24 background-color: yellow; | |
| 25 } | |
| 26 | |
| 27 .green-shadow { | |
| 28 position: absolute; | |
| 29 top: 150px; | |
| 30 left: 150px; | |
| 31 width: 120px; | |
| 32 height: 120px; | |
| 33 border-bottom-right-radius: 60px 60px; | |
| 34 border-top-left-radius: 60px 60px; | |
| 35 background-color: black; | |
| 36 } | |
| 37 | |
| 38 .yellow-shadow { | |
| 39 position: absolute; | |
| 40 top: 160px; | |
| 41 left: 350px; | |
| 42 width: 140px; | |
| 43 height: 140px; | |
| 44 border-top-right-radius: 70px 70px; | |
| 45 border-bottom-left-radius: 80px 70px; | |
| 46 background-color: black; | |
| 47 } | |
| 48 | |
| 49 .container { | |
| 50 position: absolute; | |
| 51 } | |
| 52 </style> | |
| 53 </head> | |
| 54 <body> | |
| 55 <div class="container"> | |
| 56 <div id="yellowShadow" class="yellow-shadow"></div> | |
| 57 <div id="yellow" class="yellowSquare"></div> | |
| 58 <div id="greenShadow" class="green-shadow"></div> | |
| 59 <div id="green" class="greenSquare"></div> | |
| 60 </div> | |
| 61 </body> | |
| 62 </html> | |
| OLD | NEW |