如何在CSS中实现跨维度百分比单位？Bootstrap列伪元素开发问题

我使用Bootstrap开发，现有以下布局标记：

<div class="row">
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
</div>

另一种场景的布局：

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

核心要点：.col-x类元素的尺寸（宽、高）不固定，高度由内部内容决定。我需要为所有.col-x元素的::before和::after伪元素设置样式，关键要实现基于某一维度的恒定比例计算，比如我尝试的CSS代码：

/* 假设.col-x是我给元素添加的类 */
.col-x::before{
    content: " ";
    position: absolute;
    height: 10%;
    width: calc(height * 2); /* 我需要宽度是高度的两倍，但20%是相对于父元素宽度的百分比，无法满足需求 */
    background-color: white;
    border-top-left-radius: calc(10% + 1rem);  /* 需要是高度的10%加上固定1rem */
    border-top-right-radius: calc(10% + 1rem); /* 需要是高度的10%加上固定1rem */
    border: 1rem solid var(--edge4);
    border-bottom: 0;
    top: -5rem;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

现在的问题是：如何在CSS中实现这类跨维度的百分比计算？比如让宽度是高度的两倍，圆角结合高度百分比与固定值。

方法1：使用CSS变量 + aspect-ratio（推荐） #

通过CSS变量定义伪元素的高度，再利用aspect-ratio属性直接设定宽高比，同时用变量计算圆角值：

.col-x {
  position: relative; /* 绝对定位的伪元素需要父元素设相对定位 */
}
.col-x::before{
    --pseudo-height: 10%; /* 定义伪元素高度的变量 */
    content: "";
    position: absolute;
    height: var(--pseudo-height);
    aspect-ratio: 2 / 1; /* 宽高比设为2:1，自动让宽度等于高度的两倍 */
    background-color: white;
    /* 计算圆角：高度的10% + 固定1rem */
    border-top-left-radius: calc(var(--pseudo-height) * 0.1 + 1rem);
    border-top-right-radius: calc(var(--pseudo-height) * 0.1 + 1rem);
    border: 1rem solid var(--edge4);
    border-bottom: 0;
    top: -5rem;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

aspect-ratio是现代浏览器支持的属性，能直接根据高度自动计算宽度，逻辑直观且无额外副作用，是最优方案。

方法2：缩放法（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用宽度放大+transform缩放的方式实现宽高比：

.col-x {
  position: relative;
}
.col-x::before{
    --pseudo-height: 10%;
    content: "";
    position: absolute;
    width: 200%; /* 先设宽度为高度的两倍对应的父元素宽度占比 */
    height: var(--pseudo-height);
    transform: translate(-50%, 0) scale(0.5); /* 缩放0.5，让实际宽度回到高度的两倍 */
    background-color: white;
    border-top-left-radius: calc(var(--pseudo-height) * 0.1 + 1rem);
    border-top-right-radius: calc(var(--pseudo-height) * 0.1 + 1rem);
    border: 1rem solid var(--edge4);
    border-bottom: 0;
    top: -5rem;
    left: 50%;
    z-index: 2;
}

注意：缩放会影响边框、阴影等样式的显示尺寸，需要根据实际情况调整。

关于圆角的计算逻辑 #

你需要的圆角是“高度的10% + 1rem”，通过CSS变量var(--pseudo-height)可以直接引用伪元素的高度值，乘以0.1得到高度的10%，再加上固定值1rem即可实现需求。

内容的提问来源于stack exchange，提问作者Ammar Ahmed