selector svg{ animation: rotate 20s linear infinite; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.triangle{ width: 0px!important; height: 0px!important; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 150px solid red; position: relative; } .triangle::before{ position: absolute!important; content:”; width: 0px; height: 0px; top:75px; left: -87px; right: 0px; bottom:0; margin: auto; border-left: 87px solid transparent; border-right: 87px solid transparent; border-bottom:138px solid #fff; }

:root{ –first-color: #FF0000; –second-color:#00FF00; –size: 100px; –speed: 4s; } selector{ overflow: hidden !important; display: flex; justify-content: center; align-items: center; } selector:before{ content: ”; position: absolute; width: var(–size); height: 140%; background: linear-gradient(var(–first-color), var(–second-color)); animation: animate var(–speed) linear infinite; } @keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }