:root {
font-size: 0px;
}
.wrap-lg {
width: 200px;
height: 200px;
border-radius: 100%;
}
.quarter {
width: 50%;
height: 50%;
display: inline-block;
font-size: 0;
background: black;
overflow: hidden;
}
#center {
width: 80%;
height: 80%;
background-color: white;
position: relative;
border-radius: 100%;
margin: 10%;
left: 0px;
top: -100%;
}
.quarter::after,
.quarter::before {
content: "";
display: block;
filter: blur(3px);
}
#lt {
border-radius: 100% 0 0 0;
background: linear-gradient(45deg, #ffb507 0%, #ff9800 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#lt::before {
width: 20%;
height: 90%;
margin-left: 90%;
background-color: #FF9800;
}
#lt::after {
width: 20%;
height: 20%;
background-color: #ffc107;
}
#rt {
border-radius: 0 100% 0 0;
background: linear-gradient(135deg, #ff9800 0%, #ff0000 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#rt::before {
width: 20%;
height: 90%;
margin-left: -10%;
background-color: #FF9800;
}
#rt::after {
width: 110%;
height: 20%;
background-color: #ff0000;
}
#lb {
border-radius: 0 0 0 100%;
background: linear-gradient(135deg, #ffc107 0%, #ffeb3b 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#lb::before {
width: 100%;
height: 20%;
margin-left: -10%;
background-color: #ffc107;
}
#lb::after {
width: 20%;
height: 20%;
margin-left: 90%;
margin-top: 70%;
background-color: #ffeb3b;
}
#rb {
border-radius: 0 0 100% 0;
background: linear-gradient(45deg, #ffeb3b 0%, #00de07 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#rb::before {
width: 100%;
height: 20%;
margin-top: -10%;
background-color: #00de07;
}
#rb::after {
width: 20%;
height: 20%;
margin-left: -10%;
margin-top: 70%;
background-color: #ffeb3b;
}
<div class="wrap-lg">
<div id="lt" class="quarter"></div>
<div id="rt" class="quarter"></div>
<br>
<div id="lb" class="quarter"></div>
<div id="rb" class="quarter"></div>
<div id="center"></div>
</div>