How to create circle with four quarters [duplicate] - css

Question

This question already has answers here:
CSS: Circle with four colors and only one div
(3 answers)
Closed 7 years ago.
Is it possible to create a circle using only CSS with four quarters in it?
I can't get further than:
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
colour: red;
}
<div class="circle"> </div>

Answer 1

Easily...using borders and a rotation.
.circle {
margin: 1em auto;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 20px;
border-style: solid;
border-color: red green blue yellow;
transform: rotate(45deg);
}
<div class="circle"></div>
You can even have colored hollow circles.
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 20px;
border-style: solid;
border-color: red green blue yellow;
transform: rotate(45deg);
}
.wide {
width: 100px;
height: 100px;
}
<div class="circle wide"></div>
Or perhaps with pseudo-elements (no rotation needed), just gradients.
*,
*::before,
*::after {
box-sizing: border-box;
}
.circle {
width: 100px;
height: 100px;
margin: 1em auto;
position: relative;
border-radius: 50%;
overflow: hidden;
border: 6px solid pink; /* borders on it too */
}
.circle::before,
.circle::after {
content: '';
position: absolute;
height: 100%;
width: 50%;
top: 0;
}
.circle::before {
left: 0;
background: linear-gradient(green, green 50%, yellow 50%);
}
.circle::after {
left: 50%;
background: linear-gradient(red, red 50%, blue 50%);
}
<div class="circle"></div>

Answer 2

Sure (https://jsfiddle.net/to42ug5y/), you're stuck with just 4 quarters however:
<div id="circle">
<div id="q1" class="quarter"></div>
<div id="q2" class="quarter"></div>
<div id="q3" class="quarter"></div>
<div id="q4" class="quarter"></div>
</div>
CSS:
#circle {
display: block;
padding: 0;
width: 200px;
height: 200px;
border: 1px;
border-radius: 50%;
overflow: hidden;
}
.quarter {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
#q1 {
background-color: #f00;
}
#q2 {
background-color: #0f0;
}
#q3 {
background-color: #00f;
}
#q4 {
background-color: #0ff;
}

Answer 3

This will do it for you https://jsfiddle.net/DIRTY_SMITH/bpxr7858/
HTML
<div id="container">
<div id="part1-wrapper" class="cover">
<div id="part1" class="pie"></div>
</div>
<div id="part2-wrapper" class="cover">
<div id="part2" class="pie"></div>
</div>
<div id="part3-wrapper" class="cover">
<div id="part3" class="pie"></div>
</div>
<div id="part4-wrapper" class="cover">
<div id="part4" class="pie"></div>
</div>
</div>
CSS
#container {
position: relative;
width: 100px;
height: 100px;
}
.cover {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0 100px 100px 50px);
}
.pie {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0 50px 100px 0px);
}
#part1-wrapper {
transform: rotate(0deg);
}
#part1 {
background-color: red;
transform: rotate(90deg);
}
#part2-wrapper {
transform: rotate(90deg);
}
#part2 {
background-color: green;
transform: rotate(90deg);
}
#part3-wrapper {
transform: rotate(180deg);
}
#part3 {
background-color: yellow;
transform: rotate(90deg);
}
#part4-wrapper {
transform: rotate(270deg);
}
#part4 {
background-color: blue;
transform: rotate(90deg);
}