* {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

      }

​

      .box {

        margin: 100px;

        position: relative;

        height: 200px;

      }

​

      .box i {

        position: absolute;

        background-color: rgba(28, 229, 129, 0.4);

        width: 50px;

        height: 100px;

        transform: skewY(25deg);

        bottom: 0;

        animation: spin 2s infinite linear;

      }

​

      .box i:nth-child(2) {

        transform: skewY(-25deg);

        left: 51px;

      }

​

      .box i:nth-child(2)::after {

        content: '';

        position: absolute;

        background-color: rgba(28, 229, 129, 0.4);

        width: 48px;

        height: 50px;

        transform: skew(47deg) rotate(90deg);

        top: -50px;

        right: 27px;

      }

​

      @keyframes spin {

        0% {

          height: 100px;

        }

​

        50% {

          height: 200px;

        }

​

        100% {

          height: 100px;

        }

​

      }