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?
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>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'];
The height of the triangle will be bottom-border - top-border. In the snippet as you can see when the top border is shown it is directly above the bottom border and from the bottom the bottom-border extends 100px till the top, hence giving it the height of 100px.
#triangle-up {
width: 0;
height: 0px;
border-left: 30px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
border-top: 1px solid black;
}<div id="triangle-up"></div>