CSS - how do I make a 1/4 circle that is 100vh? - html

Question

I want something like this (the pink circle): CSS quarter circle 100vh example.
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

Answer 1

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>

Answer 2

You can do it like this:
* {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: 125.5vw; /* if exactly 16:9 vw/vh aspect ratio */
position: absolute;
bottom: -100vh;
right: -56.250vw; /* if exactly 16:9 vw/vh aspect ratio */
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>
Conclusion: This works perfectly if the screen viewport is exactly at 16:9 aspect ratio (see it inside the editor (not "Run code snippet") without Menu Bar & Bookmarks Toolbar but better to see it in full screen), anything else than that fails so I wouldn't recommend using viewport units for this task. If anyone can prove me wrong or do it better, go ahead.
And with px:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.box > .circle {
height: 180px;
width: 180px;
position: absolute;
bottom: -90px;
right: -90px;
border-radius: 50%;
background: hotpink;
}
<div class="box">
<div class="circle"></div>
</div>

Answer 3

you can start to keep the box into the ratio you want and center it when it doesn't fill the whole screen (=> downscaling to fit within the screen)
to size things, you can relay on %, vw,vh,vmax and or vmin units.
basicly you can start with size and max-size using the viewport as reference for the main box:
height:100%;
width:100%;
max-width:179vh;/* height viewport*/
max-height:56vw;/* width viewport*/
to align content you can use the flex display and margins and position.
To draw that 1/4 circle, you need a square that is at least the height of your box if it is to be drawn from border-radius. ( else a radial-gradient would do just fine).
for the vertical text, you may take a look at writing-mode.
A mix of CSS3 rules and positionning method can allow to do something that is about fluid.
Run the snippet below in fullpage and resize your window (heigh/width/both) your browser to see behavior.(or play with the codepen)
html {
height: 100%;
display: flex;
background: #ccc;
}
body {
margin: auto;
background: linear-gradient( to right, rgb(231, 231, 231) 25%, rgb(225, 207, 207) 25%);
height: 100%;
width: 100%;
max-width: 179vh;
max-height: 56vw;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
box-shadow: 0 0 0 2px;
/* debug , see me */
}
/* make div be squares */
div:before {
content: "";
display: inline-block;
padding-top: 100%;
vertical-align: top;
}
.small {
border-radius: 50%;
background: rgb(101, 112, 168);
width: 25%;
margin-left: 13%;
box-shadow: 20vmin 20vmin 40vmin;
}
.big {
background: linear-gradient(to top, rgb(195, 90, 131), rgb(195, 90, 131)) no-repeat 0 0;
width: 56%;/* according to the ratio choosen */
border-top-left-radius: 100%;
flex-shrink: 0;/* avoid flex to shrink it */
margin: auto 0 0 auto;
}
/* position piece of text via absolute */
p {
margin: 0;
position: absolute;
bottom: 1%;
right: 5%;
font-size: 15vmin;
white-space: nowrap;
color: white;
}
p span {/* this rules might need to be tune to specific font-family*/
width: 0.25em;
display: inline-block;
vertical-align: -0.1em;
font-size: 0.155em;
writing-mode: vertical-lr;
transform: scale(-1);/*=> writing-mode:sideways-lr; not avalaible everywhere*/
}
h1,
body:before {
top: 0;
color: rgb(101, 112, 168);
position: absolute;
width: 5em;
font-size: 2vmin;
margin: 12vmin 0 5vmin 5vmin;
}
body:before {
content: "2017";
top: auto;
bottom: 0;
font-weight: bold;
}
h1:before {
content: "HB";
color: rgb(195, 90, 131);
border-radius: 50%;
position: absolute;
bottom: 150%;
font-size: 2.5em;
width: 0.75em;
height: 0.75em;
line-height: 0.75em;
letter-spacing: -0.35em;
border: solid 1px;
text-indent: -0.35em;
overflow: hidden;
}
<h1>VISUAL EXPLORATION</h1>
<p><span>BACK TO</span>BASIS</p>
<div class="small"></div>
<div class="big"></div>

Answer 4

By using the same view port unit for both height and width, you can achieve a perfect circle. Then putting it within a container which is fixed to the height of the view port and hiding the rest of the overflow will allow you to remove any unnecessary scroll bars and still allow for content below the circle.
The below demo will show the circle proportionally correct, always 100% of the view port height while making sure it is always a perfect circle.
It will obviously look better in full screen.
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: #dedede;
}
.dark {
background: #777777;
}
.circle {
width: 200vh;
height: 200vh;
border-radius: 100%;
position: absolute;
right: -100vh;
background: pink;
}
<div class="container">
<div class="circle"></div>
</div>
<div class="container dark">
</div>