0
202
Vistas¿Cómo establecer el color para parte del borde?
¿Cómo establecer el color solo para una parte del borde?
Este es un ejemplo de mi código donde solo pude cambiar el 25% del borde usando solo 4 parámetros del borde, pero ¿hay alguna forma de que pueda hacer algo como el 37%, el 65% u otros?
#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>Esto es lo más cercano que pude obtener, pero quiero que el color del borde diferente (azul) comience desde el borde izquierdo.
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>El siguiente efecto de color de borde es lo que quiero lograr.
¿Hay alguna forma de lograr esto con CSS o JS?
·
Juan Pablo Isaza
Responde la pregunta