如何计算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中计算它的高度？

- Ver Nick

---

需要使用公式计算吗？高度不是等于边框底部的值吗？ - Andy

你可能认为重复是错误的，但是重复会向你解释三角形是如何构建的，因此你将了解每个维度，并能够确定高度（就像这个例子：https://dev59.com/Ymw05IYBdhLWcg3wuUAL#15546077）。 - Temani Afif

@TemaniAfif 如果你真的这么认为，我不会和你争论，因为你是这个网站上经验丰富的用户，你更清楚。 - Ver Nick

我不知道更好的方法，如果你不同意，你仍然可以说出为什么并进行争论。我可能会尝试提供更多的论据来说服你。 - Temani Afif

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>

- FZs

Answer 2

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

完整宽度为80像素： 从顶部尖端到左侧尖端的左侧距离为30像素。 从顶部尖端到右侧尖端的右侧距离为50像素。

如何在Javascript中获取这个值：

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

- Matty J

Answer 3

三角形的高度将是底边界-顶边界。在片段中，当显示顶部边界时，它直接位于底部边界上方，并且从底部开始，底部边界向上延伸100px，因此使其具有高度为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>

- ellipsis