| <html> |
| <head> |
| <style> |
| div { |
| position: absolute; |
| width: 200px; |
| height: 200px; |
| } |
| #grad { |
| background: -webkit-radial-gradient(blue 0%, blue 25%, green 25% ,green 50%, orange 50%, orange 75%, lime 75%); |
| -webkit-clip-path: inset(0% 40% 0% 40%); |
| } |
| .box { |
| position: absolute; |
| background-color:black; |
| } |
| #box1 { |
| -webkit-clip-path: inset(30% 40% 60% 40%); |
| } |
| #box2 { |
| -webkit-clip-path: inset(60% 40% 30% 40%); |
| } |
| #box3 { |
| -webkit-clip-path: inset(10% 40% 80% 40%); |
| } |
| #box4 { |
| -webkit-clip-path: inset(80% 40% 10% 40%); |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <div id="grad"></div> |
| <div id="box1" class="box"></div> |
| <div id="box2" class="box"></div> |
| <div id="box3" class="box"></div> |
| <div id="box4" class="box"></div> |
| </div> |
| </body> |
| </html> |
