body, html {

    width: 100%;

    height: 100%;

    display: flex;

}

​

.triangle {

  position: relative;

    margin: auto;

  background-color: orange;

}

.triangle:before,

.triangle:after {

  content: '';

  position: absolute;

  // background-color: inherit;

    // background: linear-gradient(to right, orange 0%, red 100%);

}

.triangle,

.triangle:before,

.triangle:after {

  width:  10em;

  height: 10em;

  border-top-right-radius: 30%;

}

​

.triangle {

  transform: rotate(-60deg) skewX(-30deg) scale(1,.866);

}

.triangle:before {

  transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);

}

.triangle:after {

  transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);

}

​

.triangle:hover { background: rgba(0,0,255,.5) }

.triangle:hover:before { background: rgba(255,0,0,.5) }

.triangle:hover:after { background: rgba(255,255,0,.5) }

​

.demo::after,

.demo::before {

    content: unset;

}

.demo {

    animation: change 6s infinite linear;

    border-top-right-radius: 30%;   

}

​

@keyframes change {

    0%,

    25% {

        transform: rotate(0) skewX(0) scale(1);

    }

    40% {

        transform: rotate(-60deg) skewX(0) scale(1);

    }

    65% {

        transform: rotate(-60deg) skewX(-30deg) scale(1);

    }

    90%,

    100% {

        transform: rotate(-60deg) skewX(-30deg) scale(1,.866);

    }

}