<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
        }

        #topleft {
            width: 0; 
            height: 0; 
            border-left: 50px solid green;
            border-right: 50px solid orange;
            border-top: 50px solid orange;
        }
        #topright {
            width: 0; 
            height: 0; 
            border-left: 50px solid orange;
            border-right: 50px solid lime;
            border-top: 50px solid lime;
        }
        #topmiddleleft {
            width: 0; 
            height: 0; 
            clear: left;
            border-left: 50px solid green;
            border-right: 50px solid orange;
            border-bottom: 50px solid green;
        }
        #topmiddleright {
            width: 0; 
            height: 0; 
            border-left: 50px solid orange;
            border-right: 50px solid lime;
            border-bottom: 50px solid orange;
        }

        #bottommiddleleft {
            width: 0; 
            height: 0; 
            clear: left;
            border-left: 50px solid blue;
            border-right: 50px solid green;
            border-top: 50px solid green;
        }
        #bottommiddleright {
            width: 0; 
            height: 0; 
            border-left: 50px solid green;
            border-right: 50px solid orange;
            border-top: 50px solid orange;
        }
        #bottomleft {
            width: 0; 
            height: 0; 
            clear: left;
            border-left: 50px solid blue;
            border-right: 50px solid green;
            border-bottom: 50px solid blue;
        }
        #bottomright {
            width: 0; 
            height: 0; 
            border-left: 50px solid green;
            border-right: 50px solid orange;
            border-bottom: 50px solid green;
        }

        .box {
            position: absolute;
        }
        .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>
        <div class="box">
            <div id="topleft"></div>
            <div id="topright"></div>
            <div id="topmiddleleft"></div>
            <div id="topmiddleright"></div>
            <div id="bottommiddleleft"></div>
            <div id="bottommiddleright"></div>
            <div id="bottomleft"></div>
            <div id="bottomright"></div>
        </div>
        <div id="x1" class="x1"></div>
        <div id="x2" class="x2"></div>
        <div id="x3" class="x3"></div>
    </div>
</body>
</html>