如何计算css三角形的高度？ [复制]答案

【问题标题】：How to calculate height of css triangle? [duplicate]如何计算css三角形的高度？ [复制]
【发布时间】：2019-06-26 20:58:42
【问题描述】：

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

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

&lt;div id="triangle-up"&gt;&lt;/div&gt;

如何在 javascript 中计算它的高度？

【问题讨论】：

必须是公式才能计算吗？高度不等于边框底值吗
您可能会认为副本是错误的，但副本会向您解释三角形是如何构建的，因此您将知道每个维度并且您将能够识别高度（例如：stackoverflow.com/a/15546077/8620333 )
@TemaniAfif 如果你真的这么认为，我不会和你争论，因为你是这个网站的经验丰富的用户，你知道得更多。
我不知道，如果您不同意，您仍然可以说为什么并争论。我可能会尝试给出更多的论据来说服你

标签： javascript html css

【解决方案1】：

高度是100px的红色边框。

全宽为 80px：从上端到左端的左侧水平方向为 30px。从上端到右端的右侧水平方向为 50px。

如何在 Javascript 中得到这个：

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

【讨论】：

【解决方案2】：

只需使用 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;
}

&lt;div id="triangle-up"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

三角形的高度为bottom-border - top-border。在 sn-p 中，您可以看到当 top border 显示时，它位于 bottom border 的正上方，并且从底部 bottom-border 将 100px 延伸到 top，因此给它的 height 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;
}

&lt;div id="triangle-up"&gt;&lt;/div&gt;

【讨论】：