<div class="wrap">
<div class="pizza">
<span class="pie pie1"></span>
<span class="pie pie2"></span>
<span class="pie pie3"></span>
<span class="pie pie4"></span>
<span class="tomato"></span>
</div>
</div>
.wrap {
height: 100vh;
width: 100vw;
display: flex;
place-content: center;
align-items: center;
}
.pizza {
flex: 0 0 75vw;
height: 75vw;
background: #bc6c25;
background-image: radial-gradient(circle, transparent 60%, white 100%),
radial-gradient(circle, #ccc 10%, transparent 10%);
background-position: 0 0, 2vw 2vw;
background-size: 75vw 75vw, 2vw 2vw;
border-radius: 50%;
overflow: hidden;
position: relative;
&:before {
display: block;
content: "";
background-color: #c71f37;
width: 68vw;
height: 68vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
&:after {
display: block;
content: "";
background-color: #fcbf49;
width: 66vw;
height: 66vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
}
.pie {
display: block;
width: 100%;
height: 2px;
background: linear-gradient(0deg, white 0%, #bc6c25 50%, white 100%);
position: absolute;
top: 50%;
z-index: 3;
}
.pie1 {
transform: rotate(45deg);
}
.pie2 {
transform: rotate(-45deg);
}
.pie3 {
transform: rotate(90deg);
}
.tomato {
position: absolute;
height: 66vw;
width: 66vw;
background-image: radial-gradient(
circle,
#c71f37 40%,
#a71e34 40%,
#a71e34 45%,
#370617 50%,
transparent 50%
);
background-size: 15vw 15vw;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.