body, html {

    width: 100%;

    height: 100%;

    display: flex;

}

​

:root {

  --s: 50px;  /* size  */

  --m: 4px;    /* margin */

  --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);

}

​

.wrap {

    position: relative;

    margin: auto;

    flex: 0 0 120%;

    transform: translate(-10%, 0);

    height: 100%;

    font-size: 0;

    background: #000;

​

    &::before {

        content: "";

        height: 100%;

        width: 27px;

        // background: repeating-linear-gradient(

        //     transparent 0,

        //     transparent 80px,

        //     #000 80px,

        //     #000 var(--f)

        // );

        shape-outside: repeating-linear-gradient(

            transparent 0,

            transparent 80px,

            #000 80px,

            #000 var(--f)

        );

        float: left;

    }

    &::after {

        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);

        z-index: 1;

        mix-blend-mode: darken;

        animation: change 10s infinite linear;

    }

}

​

li {

    width: 50px;

    height: calc(var(--s) * 1.1547); 

    background: #fff;

    flex: 0 0 auto;

    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);

    margin: var(--m);

    margin-bottom: calc(var(--m) - var(--s) * 0.2885); 

    display: inline-block;

}

​

@keyframes change {

    100% {

        filter: hue-rotate(360deg);

    }

}