Estoy haciendo una lib de información sobre herramientas. Utiliza un estilo <div> . El de color rojo. Se transformó 45 grados y se cortó.

Necesito un cálculo dinámico de altura para el rojo recortado de arriba. En este caso, la altura es exactamente getBoundingClientRect().height / 2 , la función integrada se transforma pero no se recorta . La propiedad clip-path se puede personalizar, por lo que no podemos simplemente dividir la altura por 2.

Necesito una función js personalizada algo así como: getClippedBoundingClientRect()