<html>
<head>
    <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>