如何计算CSS三角形的高度？

Question

这是一个简单的三角形（非等腰）：

#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>

如何在javascript中计算其高度？

Answer 1

只需使用DOM offsetHeight即可获取对象的实际高度（包括填充和边框，但不包括轮廓）：

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

高度是100像素的红色边框。

全角为80px： 从顶部顶端到左侧顶端的水平方向左侧为30px。 从顶端到右侧的水平方向右侧为50px。

如何使用Javascript获得此信息：

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

Answer 3

三角形的高度将为bottom-border - top-border。在摘要中，您可以看到top border刚显示在bottom border上方，而bottom-border从底部延伸100px到top，因此，将其赋予height的{​​{1}}。

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;
}