0
203
ViewsHow to set color for part of the border?
How to set the color for part of the border only?
This is an example of my code where I could only change 25% of the border only by using 4 parameters of the border, but is there any way that I could do something like 37%, 65% or others?
#circle-wrapper {
position: relative;
}
.circle {
position: absolute;
background: transparent;
top: 20vh;
left: 35vw;
width: 30vw;
height: 30vw;
border-radius: 100%;
border: 2.5vw solid;
border-color: #82ba00;
}
#area {
border-color: #82ba00 #82ba00 transparent blue;
}<div id='circle-wrapper'>
<div class='circle' id='area'></div>
</div>This is the closest I could get but I want the different border-color (blue) start from the left border.
setInterval(()=>{
document.querySelector('#hidden_area').style.transform = `rotate(${Math.random()*180}deg)`
},1000)#circle-wrapper {
position: relative;
}
.circle {
position: absolute;
background: transparent;
top: 20vh;
left: 35vw;
width: 30vw;
height: 30vw;
border-radius: 100%;
border: 2.5vw solid;
border-color: #82ba00;
}
#area {
border-color: #82ba00 #82ba00 transparent #82ba00;
}
#hidden_area {
border-color: transparent blue transparent transparent;
transform: rotate(45deg);
}<div id='circle-wrapper'>
<div class='circle' id='area'></div>
<div class='circle' id='hidden_area'></div>
</div>The following border-color effect is the thing I want to achieve.
Is there any way I could achieve this with CSS or JS?
·
Juan Pablo Isaza
Answer question