How to calculate height of css triangle? [duplicate]

Question

Here is a simple triangle(non-isosceles):

#triangle-up {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

How can I calculate its height in javascript?

Answer 1

Simply use DOM offsetHeight to get the real height (including paddings and borders, but excluding outlines) of an object:

var height=document.getElementById("triangle-up").offsetHeight;
console.log(height)

#triangle-up {
  width: 0;
  height: 0px;
  border-left: 30px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

Answer 2

The height is the 100px red border.

The full width is 80px: The left side from the top tip to the left tip horizontally is 30px. The right side from the top tip to the right tip horizontally is 50px.

How to get this in Javascript:

const triangle = document.querySelector('#triangle-up');
const trianlgeStyles = window.getComputedStyle(triangle);
const triangleHeight = triangleStyles['border-bottom-width'];