<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.