up to 90deg angle

by Richard Hunter

HTML

<div id="foo" class="foo"></div>

SCSS

.foo {
  --color: black;
  width: var(--width);
  height: var(--height);
  border: solid 1px var(--color);
  background-image: linear-gradient(var(--angle), blue var(--a), red 0);
}

JavaScript

const height = 50;
const width = 130;
const deg = 45;

foo.style.setProperty('--color', 'pink');
const cos = Math.cos(toRadians(deg));
const sin = Math.sin(toRadians(deg));

function toRadians(deg) {
	return Math.PI / 180 * deg;
};

const a = cos * height;
const b = sin * width;
const total = a + b;
const result =  (a / total) * 100 + '%';
foo.style.setProperty('--a', result);
foo.style.setProperty('--width', width + 'px');
foo.style.setProperty('--height', height + 'px');
foo.style.setProperty('--angle', 360 - deg + 'deg');

console.log(result);