body, html {

    width: 100%;

    height: 100%;

    display: flex;

    padding: 4px;

}

​

p {

    position: relative;

    margin: auto;

    height: 100%;

    overflow: hidden;

    line-height: 36px;

    font-size: 24px;

​

    &::before {

        content: "";

        height: 100%;

        width: 24px;

        // background: repeating-linear-gradient(

        //     transparent 0,

        //     transparent 36px,

        //     #f00 36px,

        //     #f00 72px

        // );

        shape-outside: repeating-linear-gradient(

            transparent 0,

            transparent 36px,

            #000 36px,

            #000 72px

        );

        float: left;

    }

}

​

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: 4px;

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

    display: inline-block;

}

​

@keyframes change {

    100% {

        filter: hue-rotate(360deg);

    }

}