能否将div的边框宽度设置为相对于其父元素的宽高？

原始代码 #

HTML #

<div id="rectangle">
  <div id="triangle"></div>
</div>

CSS #

#rectangle {
  width: 100vw;
  height: 50vw;
  background-color: black;
}

#triangle {
  width: 0;
  height: 0;
  border-top: 25vw solid transparent;
  border-bottom: 25vw solid transparent;
  border-left: 33.33vw solid blue;
}

问题描述 #

我通过“triangle”div的边框宽度制作了一个等腰三角形，使其底边贴合在父元素“rectangle”div的左侧。
我希望三角形的底边长度与矩形左侧边长一致，高度恰好为矩形宽度的1/3。目前我通过设置其尺寸相对于视口（viewport）实现了该效果，但我实际想要的是相对于父元素的尺寸来定义这些属性（我知道功能上看似相同），请问这是否可行？

解决方案 #

当然可行，你可以通过CSS变量+calc()函数实现完全基于父元素尺寸的定义，后续父元素尺寸修改时，三角形会自动适配比例。调整后的代码如下：

修改后的CSS #

#rectangle {
  width: 100vw;
  height: 50vw;
  background-color: black;
  position: relative; /* 为子元素提供定位上下文 */
  /* 定义父元素的宽高变量，后续只需修改这里即可 */
  --parent-width: 100vw;
  --parent-height: 50vw;
}

#triangle {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  /* 基于父元素变量计算边框尺寸，保证比例符合需求 */
  border-top: calc(var(--parent-height) / 2) solid transparent;
  border-bottom: calc(var(--parent-height) / 2) solid transparent;
  border-left: calc(var(--parent-width) / 3) solid blue;
}

如果父元素改用相对单位（如百分比），只需同步修改变量值即可，例如：

#rectangle {
  width: 80%;
  height: 40%;
  background-color: black;
  position: relative;
  --parent-width: 80%;
  --parent-height: 40%;
}

这样三角形的尺寸就完全依赖父元素的设定，和视口单位彻底解绑。

内容的提问来源于stack exchange，提问作者Dennis Mangino