在不修改 HTML 结构的前提下，如何得到一个 border-radius 随宽高变化同等等比例变化的 div

Question

已知 HTML 结构如下：

<div class="flex-border-radius"></div>

样式如下：

.flex-border-radius {
  margin: 100px;
  width: 400px;
  height: 200px;
  border: 1px solid #345;
}

它的 width 与 height 永远保持 2:1，现在的需求是，当 width 为 400px 时，它的 border-radius 为 20px，当 width 改变时， border-radius 按同等比例改变。

Answer 1

等比例的话直接用这种方式就可以了

border-radius: 10%/20%