html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

:root {

    --width: 120px;

}

​

div {

    position: relative;

    margin: auto;

    width: var(--width);

    height: var(--width);

    transform: rotate(30deg) skewY(30deg) scaleX(0.866);

    // background: #000;

    // border: 1px solid #000;

    border-radius: 20%;

    // animation: change 6s infinite;

    // overflow: hidden;

}

​

.demo,

.gradient {

    overflow: hidden;

    border: unset;

}

​

div::before,

div::after {

    content: "";

    position: absolute;

    width: var(--width);

    height: var(--width);

}

​

div::before {

    border-radius: 20% 20% 20% 55%;

    // transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);

    background: red;

    // -webkit-box-reflect: above 100px;

}

​

div::after {

    border-radius: 20% 20% 55% 20%;

    background: blue;

    // transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);

    // animation: change3 10s linear forwards;

}

​

.gradient::before,

.demo::before {

    background: #000;

    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);

}

.gradient::after,

.demo::after {

    background: #000;

    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);

}

​

.gradient::before,

.gradient::after, {

    background: linear-gradient(#0f0, #03a9f4);

}

​

.animation::before {

    animation: change2 6s linear forwards;

}

.animation::after {

    animation: change3 6s linear forwards;

}

​

​

@keyframes change {

    0%,

    20% {

        transform: rotate(0deg) skewY(0deg) scaleX(1);

    }

    40% {

        transform: rotate(30deg) skewY(0deg) scaleX(1);

    }

    60% {

        transform: rotate(30deg) skewY(30deg) scaleX(1);

    }

    80%,

    100% {

        transform: rotate(30deg) skewY(30deg) scaleX(0.866);

    }

}

​

@keyframes change2 {

    0% {

        transform: scaleX(1) skewY(1) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

        opacity: .5;

    }

    20% {

        transform: scaleX(1) skewY(1) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    30% {

        transform: scaleX(1.155) skewY(1) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    40% {

        transform: scaleX(1.155) skewY(-30deg) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    50% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    60% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(0) scaleY(1) translateX(0);

    }

    70% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(1) translateX(0);

    }

    80% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(0);

    }

    100% {

        opacity: .5;

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);

    }   

}

​

@keyframes change3 {

    0% {

        transform: scaleX(1) skewY(1) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

        opacity: .5;

    }

    20% {

        transform: scaleX(1) skewY(1) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    30% {

        transform: scaleX(1.155) skewY(1) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    40% {

        transform: scaleX(1.155) skewY(-30deg) rotate(0) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    50% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(0) skewX(0) scaleY(1) translateX(0);

    }

    60% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(0) scaleY(1) translateX(0);

    }

    70% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(1) translateX(0);

    }

    80% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(0);

    }

    100% {

        transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);

        opacity: .5;

    }   

}