| <html> | |
| <head> | |
| <style> | |
| div { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| #grad { | |
| position: absolute; | |
| background: conic-gradient(from 45deg, | |
| blue 0deg, blue 90deg, | |
| orange 0deg, orange 180deg, | |
| green 0deg, green 270deg, | |
| yellow 0deg, yellow 360deg); | |
| } | |
| .x { | |
| position: absolute; | |
| -webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%); | |
| } | |
| #x { | |
| background-color:black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <div id="grad"></div> | |
| <div id="x" class="x"></div> | |
| </div> | |
| </body> | |
| </html> |