CSS 还是 jQuery？如何根据具有灵活大小的容器获得圆形？ [复制]

Question

这是我的代码：

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#container {
  width: 50%;
  height: 50%;
}

#shape {
  border: 20px solid red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

<div id="container">
  <div id="shape"></div>
</div>

容器总是应该用一个完美的圆来填充，而不是这样的椭圆。所以#shape 的height 和width 应该始终相同，并且应该尽可能好地填充#container。

是否可以仅使用 CSS 来做到这一点？还是需要 jQuery？

Answer 1

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#container {
  width: 50vw;
  height: 50vw;
}

#shape {
  border: 20px solid red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

<div id="container">
  <div id="shape"></div>
</div>