html - CSS-如何制作100vh的1/4圆？

我想要这样的东西（粉色圆圈）：CSS quarter circle 100vh example。
到目前为止，我有一个半圆（见下面的CSS），但当我试图使它100vh，它伸展，我不知道如何保持它的比例。

.circle {
height: 180px;
width: 90px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: red;
margin: 100px;
position: absolute;}

任何洞察都非常感激。谢谢

最佳答案

我修改了代码，只使用200vh来计算圆的宽度和高度。这将给你一个完美的圆圈在任何屏幕大小。

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}

.box {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.box > .circle {
  height: 200vh;
  width: 200vh;
  position: absolute;
  bottom: -100vh;
  right: -100vh;
  border-radius: 50%;
  background: hotpink;
}

<div class="box">
  <div class="circle"></div>
</div>

关于html - CSS-如何制作100vh的1/4圆？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46874095/