单半径 `border-radius` 作为特定边的百分比

Question

我需要 div 的 border-radius 根据 div 的尺寸进行更改 - 但不要变成椭圆形或形成药丸形状。例如，宽度为 250,35 的 div 应具有 7px 的 border-radius，而 280,70 之一的 border-radius 应为 15px - 始终为高度的 20%，但始终使用圆形舍入。在网站的另一个部分，我需要边框半径等于 min(width, height)/5。没有 JavaScript 我怎么能做到这一点？

在所有情况下，宽度和高度都是任意的。我当前的解决方案是要求对不遵循默认大小的元素进行显式 border-radius，这将不允许调整大小。

.box {
  width: 250px;
  height: 35px;
  border-radius: 7px;
  background-color: black;
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 5px auto;
}
.two {
  width: 280px;
  height: 70px;
  border-radius: 14px;
  line-height: 70px;
}
.three {
  border-radius: 20%;
}
.four {
  border-radius: 999px;
}
.five {
  /* calculated from initial values, note that they are wrong with the larger size */
  border-radius: 2.8%/20%;
  width: 280px;
  height: 70px;
  line-height: 70px;
}

<div class="box one">yes</div>
<div class="box two">yes</div>
<div class="box three">no</div>
<div class="box four">no</div>
<div class="box five">no</div>

Answer 1

这里有 8 个 border-radius 值要使用，因为角是椭圆而不是圆（尽管它可以是）：

MDN Link

border-top-left-radius: 1em 5em;

border-top-right-radius: 1em 5em;

border-bottom-right-radius: 1em 5em;

border-bottom-left-radius: 1em 5em;

从您的问题来看，该元素的比率似乎为 4:1，因此我们可以将其应用于 border-radius

.box {
  border-radius: 5%/20%;
}

.box {
  width: 250px;
  height: 35px;
  border-radius: 5%/20%;
  background-color: black;
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 5px auto;
}
.two {
  width: 280px;
  height: 70px;
}
.three {
  width: 300px;
  height: 75px;
}
.four {
  width: 400px;
  height: 100px;
}

<div class="box one">yes</div>
<div class="box two">yes</div>

<div class="box three">yes</div>
<div class="box four">yes</div>

Answer 2

简短的回答，你不能做 min(width, height) / 5，但是使用 calc()，就像在这个示例中一样，可能是一种在没有脚本的情况下尽可能接近你想要的东西的方法？

.box {
  width: 250px;
  height: 35px;
  border-radius: calc(35px * 0.2) / calc(35px * 0.2);
  background-color: black;
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 5px auto;
}
.two {
  width: 280px;
  height: 70px;
  border-radius: calc(70px * 0.2) / calc(70px * 0.2);
  line-height: 70px;
}

<div class="box one">yes</div>
<div class="box two">yes</div>

其中 border-radius 可以缩短为

  border-radius: calc(35px * 0.2);

  border-radius: calc(70px * 0.2);

单半径 `border-radius` 作为特定边的百分比

Single radius `border-radius` as percent of specific side

css

rounded-corners