html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

div {

    width: 141px;

    height: 100px;

    margin: auto;

}

​

.demo-opacity {

    overflow: hidden;

}

​

.demo,

.demo-opacity {

    position: relative;

    border: 1px solid #000;

    background: unset;

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        animation: conicmove 3s infinite linear;

        background: deeppink;

        transform-origin: left bottom;

        z-index: -1;

    }

}

​

.triangle {

    position: relative;

    background: unset;

    overflow: hidden;

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: deeppink;

        transform-origin: left bottom;

        transform: rotate(45deg);

        z-index: -1;

    }

}

​

@keyframes conicmove {

    100% {

        transform: rotate(45deg);

    }

}