How to add gradient to the triangle? - css

Question

How would I be able to apply a gradient color to the triangle?
https://jsfiddle.net/otz9ewm8/
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid #B76BF0;
transform: translateX(4px);
z-index: 0;
}
How would this be done in the code?
.spinner {
-webkit-appearance: none;
appearance: none;
border: none;
padding: 0;
display: block;
cursor: pointer;
/*background: rgba(255, 255, 255, 0.1);*/
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
box-sizing: border-box;
background-clip: padding-box;
/* -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);*/
width: 90px;
height: 90px;
border-radius: 50%;
transform-origin: 50% 55%;
transform: perspective(90px) rotateX(30deg);
animation: spinner-wiggle 5.2s infinite;
}
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid #B76BF0;
transform: translateX(4px);
z-index: 0;
}
#keyframes spinner-wiggle {
30% {
transform: perspective(90px) rotateX(10deg);
}
40% {
transform: perspective(90px) rotateX(7deg);
}
50% {
transform: perspective(90px) rotateX(10deg);
}
60% {
transform: perspective(90px) rotateX(8deg);
}
}
.color-circle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
height: 90px;
transform-origin: 50% 50%;
background: -webkit-gradient(linear,
left top,
left bottom,
color-stop(50%, #25d8fb),
color-stop(100%, #4f66bb));
border-radius: 50%;
z-index: 0;
box-shadow: inset 0 24px 18px -10px rgba(0, 0, 140, 0.3),
inset 0 0 22px -2px rgba(0, 0, 0, 0.4);
cursor: pointer;
background: linear-gradient(100deg, #24A4EA, #379DEB 25%, #B76BF0);
-webkit-mask-image: radial-gradient(circle, transparent 0 36px, black 36px);
mask-image: radial-gradient(circle, transparent 0 50px, black 20px);
}
.spinner:hover .color-circle {
background: -webkit-gradient(linear,
left top,
left bottom,
color-stop(50%, rgba(34, 204, 0, 0.9)),
color-stop(100%, #55ff00));
}
.color-circle:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 72px;
height: 72px;
border-radius: 50%;
background-color: #353198;
z-index: 0;
}
.spinner:hover .color-circle {
animation: spin 1.7s infinite linear;
}
#-webkit-keyframes spin {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
<div class=" spinner">
<span class="color-circle"></span>
</div>

Answer 1

You can use clip-path instead of borders
background-image: linear-gradient(100deg, #24A4EA, #379DEB 25%, #B76BF0);
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);