Pizza

index.html

<div class="wrapper flex-vertically">
  <h1>Pizza</h1>
  <div class="pizza flex-vertically">
    <div class="crust">
      <div class="cheese">
        <div class="slices slices--1-7"></div>
        <div class="slices slices--2-8"></div>
        <div class="slices slices--4-10"></div>
        <div class="slices slices--5-11"></div>
      </div>
    </div>
  </div>
</div>

pizza.markdown

Pizza

A Pen by Giovanni Orlando on CodePen.

License.

style.css

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: black;
  text-align: center;
}

.flex-vertically {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-horizontally {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background-color: peachpuff;
}

.crust {
  width: 280px;
  height: 280px;
  margin: 0 auto;
  border: 2px solid black;
  border-radius: 50%;
  background-color: antiquewhite;
}

.cheese {
  width: 260px;
  height: 260px;
  margin: 0 auto;
  border: 1px solid crimson;
  border-radius: 50%;
  background: radial-gradient(crimson 40%, transparent 41%), lightgoldenrodyellow;
  background-size: 60px 60px;
  position: relative;
  top: 10px;
}

.cheese::before,
.cheese::after,
.cheese .slices {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: black;
}

.cheese::after {
  transform: rotate(90deg);
}

.cheese .slices.slices--1-7 {
  transform: rotate(30deg);
}

.cheese .slices.slices--2-8 {
  transform: rotate(60deg);
}

.cheese .slices.slices--4-10 {
  transform: rotate(120deg);
}

.cheese .slices.slices--5-11 {
  transform: rotate(150deg);
}