<div class="pizza-container">
<div class="pizza">
<div class="crust"></div>
<div class="cheese"></div>
<div class="tomato tomato-1"></div>
<div class="tomato tomato-2"></div>
<div class="pepperoni pepperoni-1"></div>
<div class="pepperoni pepperoni-2"></div>
<div class="slices">
<div class="slice slice1"></div>
<div class="slice slice2"></div>
<div class="slice slice3"></div>
<div class="slice slice4"></div>
</div>
</div>
</div>
.pizza-container{
position: relative;
margin: auto;
width: 600px;
height: 420px;
display: block;
}
.pizza {
position: relative;
width: 70%;
height: 100%;
background: rgba(255, 179, 65, 0.7);
top: 1%;
left: 50%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: translate(-50%);
}
.crust {
position: absolute;
background-color: red;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
border-radius: 50%;
}
.cheese {
position: absolute;
background-color: yellow;
width: 85%;
height: 85%;
top: 8%;
left: 8%;
border-radius: 50%;
}
.slices{
position: relative;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
}
.slice{
width: 1px;
height: 100%;
background-color: black;
}
.slice1{
transform: rotate(45deg)
}
.slice2{
transform: rotate(90deg)
}
.slice3{
transform: rotate(130deg)
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.