TAG
CSS
JavaScript
Result
Run
License
<fieldset> <legend>Angle</legend> <input type="range" id="angle" min="0" max="90" value="70" /> <label></label> </fieldset> <div class="triangle"> <span></span> <span></span> <span></span> </div>
body { --radius: 70px; --angle: 70deg; } .triangle { --base: var(--radius); width: calc(var(--radius) * 2); height: calc(var(--radius) * 2); position: relative; border: 1px dotted gray; border-radius: 50%; margin-block-start: 20px; } .triangle > span { position: absolute; height: 1px; inset-inline-start: 50%; } /* adjacent */ .triangle > span:nth-child(1) { width: calc(sin(var(--angle)) * var(--base)); inset-block-start: 50%; background-color: red; } /* hypotenuse */ .triangle > span:nth-child(2) { width: calc(tan(var(--angle)) * var(--base)); inset-block-start: 50%; background-color: blue; transform-origin: 0% 50%; rotate: var(--angle); } /* opposite */ .triangle > span:nth-child(3) { /* tan(A) * adjacent */ width: calc(tan(var(--angle)) * calc(sin(var(--angle)) * var(--base))); background-color: green; inset-block-start: 50%; transform-origin: 0% 50%; translate: calc(sin(var(--angle)) * var(--base)); rotate: 90deg; }
window.addEventListener("load", () => { const elAngle = document.getElementById("angle"); elAngle.addEventListener("input", e => { const elTarget = e.target; let angle = elTarget.value; document.body.style.setProperty("--angle", `${angle}deg`); elTarget.nextElementSibling.textContent = `${angle}deg`; }); elAngle.dispatchEvent(new Event("input")); });
Console
expand_less
License
License
by DevDic
Close