body, html {

    width: 100%;

    height: 100%;

    display: flex;

    background: #091b2d;

    font-family: 'Merriweather', serif;

}

​

@property --angle {

  syntax: '<angle>';

  inherits: false;

  initial-value: 0deg;

}

​

.g-container {

    position: relative;

    margin: auto;

    width: 260px;

    height: 260px;

    filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));

}

​

.g-triangle {

    position: relative;

    width: 260px;

    height: 260px;

    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));

    clip-path: polygon(0 100%, 100% 100%, 50% 0);

    animation: rotate 3s infinite linear;

}

​

.g-triangle::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background: #091b2d;

    z-index: 1;

    clip-path: polygon(14.14px calc(100% - 10px), calc(100% - 14.14px) calc(100% - 10px), 50% 20px);

}

​

@keyframes rotate {

    to {

        --angle: 360deg;

    }

}