CSS-如何制作100vh的1/4圆? [英] CSS - how do I make a 1/4 circle that is 100vh?

问题描述

我想要这样的东西(粉红色的圆圈): CSS四分之一圈100vh示例.

I want something like this (the pink circle): CSS quarter circle 100vh example.

到目前为止，我有一个半圆(请参见下面的CSS)，但是当我尝试将其设为100vh时，它会拉伸，并且我不知道如何保持其成比例.

So far, I have a half-circle (see CSS below), but when I try to make it 100vh, it stretches and I can't figure out how to keep it proportional.

.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;}

任何见解都将不胜感激.谢谢

Any insights greatly appreciated. Thanks

推荐答案

我修改了代码，使其仅使用200vh来计算圆的宽度和高度.这将在任何屏幕尺寸下为您提供一个完美的圆圈.

I modified the code to only use 200vh to calculate both width and height of circle. This will give you a perfect circle at any screen size.

* {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>

这篇关于CSS-如何制作100vh的1/4圆?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！