| <html> |
| <head> |
| <style> |
| div { |
| width: 200px; |
| height: 200px; |
| } |
| #grad { |
| position: absolute; |
| background: -webkit-linear-gradient(45deg, blue 0% 25%, green 25% 50%, orange 100px 75%, lime 150px); |
| } |
| |
| .x1 { |
| position: absolute; |
| -webkit-clip-path: polygon(0% 45%,55% 100%,45% 100%,0% 55%); |
| } |
| #x1 { |
| background-color:black; |
| } |
| .x2 { |
| position: absolute; |
| -webkit-clip-path: polygon(0% 0%, 5% 0%, 100% 95%, 100% 100%, 95% 100%,0% 5%); |
| } |
| #x2 { |
| background-color:black; |
| } |
| .x3 { |
| position: absolute; |
| -webkit-clip-path: polygon(55% 0%, 100% 45%, 100% 55%,45% 0%); |
| } |
| #x3 { |
| background-color:black; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="grad"></div> |
| <div id="x1" class="x1"></div> |
| <div id="x2" class="x2"></div> |
| <div id="x3" class="x3"></div> |
| </body> |
| </html> |
