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>