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 |