如何将 CSS calc() 与元素的高度一起使用

Question

我正在研究仅使用 CSS 制作六边形的方法，并找到了一种基于宽度为我提供正六边形的解决方案：

 .hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

但是，该代码的工作原理是根据父元素的宽度生成新的矩形。我正在寻找一种方法来根据父母的身高计算宽度。

有没有办法使用元素的高度属性而不是 calc() 的宽度？ （我不考虑使用 vh 因为最近的父母并不总是视口）。我用谷歌搜索，找不到答案。

原文由 Luciano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您正在尝试以 css 语法运行脚本，这是 不可能 的。

calc() 可以用绝对值进行基本的数学运算，它不能找到元素的高度然后对其进行数学运算。

原文由 YAMAN 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用中介来绕过这个问题： CSS 变量，它是大括号“外部”的唯一数据。

如果父级的宽度也是动态的或依赖于另一个值，请为此使用另一个 var。举个例子，你可以看到语法，它看起来像这样：

 :root {
  --hex-parent-height: 10px;
}

.hexagon.parent {
  /* ... */
  width: var(--hex-parent-height);
}

.hexagon {
  height: 100%;
  width: calc(100% * var(--hex-parent-height));
  display: inline-block;
}

CSS 变量有两种作用域：全局和局部。局部变量只会在同一个选择器中逻辑地工作，但是全局变量在你所有的 CSS 中都是相同的。全局声明一个或多个变量是通过根块完成的，如代码示例所示。

如您所见，检索 var 值与使用具有非常 好的后备功能 的 var() CSS 函数一样简单。

例如，如果您要动态设置 --hex-parent-height 并且出现问题并且 var 未设置，您可以插入一个默认值以最小化损害，如下所示： var(--hex-parent-height, 10px)

原文由 Neithan Max 发布，翻译遵循 CC BY-SA 4.0 许可协议