blob: 408ec8875d0fc813e88a6a12db1bb9647ccade24 [file] [log] [blame]
<html>
<head>
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=10900-33000" />
<style>
div {
width: 200px;
height: 200px;
}
#grad {
position: absolute;
background: conic-gradient(from 45deg,
blue 0deg, blue 90deg,
orange 0deg, orange 180deg,
magenta 0deg, magenta 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>