Necesito calcular el ancho de un div girado usando solo el alto y el ancho de la ventana, de modo que solo deje espacio para un triángulo vacío en la parte superior izquierda y en la parte inferior derecha de la página web.

Algo como esto (la parte roja es el div rotado):

El problema que tengo es que el cálculo del ancho correcto debe funcionar para cada combinación de ancho y alto de ventana. Estoy convencido de que esto es posible usando trigonometría, pero ha pasado bastante tiempo desde que trabajé con sin/tan/cos/etc. y hasta ahora nada de lo que probé realmente funcionó, así que necesito ayuda/indicaciones.

Para resumir lo que quiero lograr:

• Debería haber un triángulo vacío en la parte superior izquierda con un ángulo de 55 grados y una altura de 150 px;

• También debe haber un triángulo vacío en la parte inferior derecha con las mismas dimensiones que el anterior.

• Debería haber un div que se rota así:

  transformar: rotarX(45grados) rotarZ(45grados); transformar-origen: arriba a la izquierda;

• Lo único que debe cambiarse sobre el div rotado es el atributo css de "ancho". Estos valores deberían cambiar según la altura y el ancho de la ventana (estas son las únicas variables).

He intentado varias cosas, pero simplemente no puedo resolverlo. Aquí está mi último intento (intente cambiar el tamaño de la ventana para ver el problema):

https://codesandbox.io/s/relaxed-shtern-qphkj

Como puede ver, me las arreglé para tener siempre exactamente el mismo triángulo superior izquierdo, independientemente de la altura y el ancho de la ventana. El problema es el triángulo inferior derecho, que se superpone con el div girado (es decir, el div girado es demasiado ancho) o el triángulo vacío se vuelve demasiado grande (es decir, el div girado no es lo suficientemente ancho).

Cualquier idea o sugerencia sería apreciada.