从 HTML 对象中减去内部区域

body { min-height: 100vh; background: center / cover url('https://umodel.narod.ru/shareweb/image/rainy_night_city.jpg'); }

.cssplay-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto 0;
  width: 100%;
  max-width: 568px;
  height: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.cssplay-menu>div {
  position: relative;
  margin-bottom: 250px;
  padding-bottom: 100%;
  max-width: 100%;
  height: 0;
}

.cssplay-menu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cssplay-menu .holder {
  position: relative;
  padding-bottom: 100%;
  max-width: 100%;
  height: 0;
  overflow: hidden;
  /* Маска для прозрачности центрального круга */
  --mask: radial-gradient(#0000 34.65%, #ffff 34.95% 67.5%, #0000 67.8% 69.5%, #ffff 69.7%);
  -webkit-mask: var(--mask); mask: var(--mask);
}

.cssplay-menu input {
  position: absolute;
  display: none;
}

.cssplay-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.cssplay-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.cssplay-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-140deg) scale(0);
  transition: 0s;
}

.cssplay-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #8b0000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(50deg);
}

.cssplay-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #008080;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.cssplay-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 15px;
  bottom: 25px;
  margin: auto;
  width: 35px;
  height: 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

.cssplay-menu .segment label:nth-of-type(1) {
  transform: rotate(-140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(2) {
  transform: rotate(-100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(3) {
  transform: rotate(-60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(4) {
  transform: rotate(-20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(5) {
  transform: rotate(20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(6) {
  transform: rotate(60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(7) {
  transform: rotate(100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(8) {
  transform: rotate(140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(9) {
  transform: rotate(180deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(1) span {
  background: url(cubic/truck-white.png);
  transform: skewY(-50deg) rotate(0deg);
}

.cssplay-menu .segment label:nth-of-type(2) span {
  background: url(cubic/location-white.png);
  transform: skewY(-50deg) rotate(-40deg);
}

.cssplay-menu .segment label:nth-of-type(3) span {
  background: url(cubic/mail-white.png);
  transform: skewY(-50deg) rotate(-80deg);
}

.cssplay-menu .segment label:nth-of-type(4) span {
  background: url(cubic/pen-white.png);
  transform: skewY(-50deg) rotate(-120deg);
}

.cssplay-menu .segment label:nth-of-type(5) span {
  background: url(cubic/tag-white.png);
  transform: skewY(-50deg) rotate(-160deg);
}

.cssplay-menu .segment label:nth-of-type(6) span {
  background: url(cubic/wallet-white.png);
  transform: skewY(-50deg) rotate(-200deg);
}

.cssplay-menu .segment label:nth-of-type(7) span {
  background: url(cubic/video-white.png);
  transform: skewY(-50deg) rotate(-240deg);
}

.cssplay-menu .segment label:nth-of-type(8) span {
  background: url(cubic/cup-white.png);
  transform: skewY(-50deg) rotate(-280deg);
}

.cssplay-menu .segment label:nth-of-type(9) span {
  background: url(cubic/cup-white.png);
  transform: skewY(-50deg) rotate(-320deg);
}

.cssplay-menu .center {
  display: block;
  position: absolute;
  z-index: 200;
  left: 50%;
  top: 50%;
  margin-left: -20%;
  margin-top: -20%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #8b0000 url(cubic/settings.png) no-repeat center center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 2px #fff;
}

.cssplay-menu #toggle:checked+.holder .segment {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked+.holder .center {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1.2);
}

.cssplay-menu #toggle:checked+.holder .curve-upper {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked+.holder .curve-lower {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: rotate(-140deg) scale(1);
}

.cssplay-menu #c1:checked~.holder .segment label:nth-of-type(1),
.cssplay-menu #c2:checked~.holder .segment label:nth-of-type(2),
.cssplay-menu #c3:checked~.holder .segment label:nth-of-type(3),
.cssplay-menu #c4:checked~.holder .segment label:nth-of-type(4),
.cssplay-menu #c5:checked~.holder .segment label:nth-of-type(5),
.cssplay-menu #c6:checked~.holder .segment label:nth-of-type(6),
.cssplay-menu #c7:checked~.holder .segment label:nth-of-type(7),
.cssplay-menu #c8:checked~.holder .segment label:nth-of-type(8),
.cssplay-menu #c9:checked~.holder .segment label:nth-of-type(9) {
  background: #eb8c00;
}

.cssplay-menu #c1:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-140deg)
}

.cssplay-menu #c2:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-100deg)
}

.cssplay-menu #c3:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-60deg)
}

.cssplay-menu #c4:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-20deg)
}

.cssplay-menu #c5:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(20deg)
}

.cssplay-menu #c6:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(60deg)
}

.cssplay-menu #c7:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(100deg)
}

.cssplay-menu #c8:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(140deg)
}

.cssplay-menu #c9:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(180deg)
}

.cssplay-menu .sub {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -50%;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.cssplay-menu .sub dl {
  position: absolute;
  top: -190px;
  left: 50%;
  margin-left: -25%;
  padding: 0;
  width: 50%;
  opacity: 0;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: all 0.5s ease;
}

.cssplay-menu .sub dl dt {
  text-align: center;
  font: bold 16px/20px 'Lato', arial, sans-serif;
  color: #8b0000;
}

.cssplay-menu .sub dl dd {
  margin: 0;
  padding: 0;
  text-align: center;
  font: normal 15px/20px 'Lato', arial, sans-serif;
  color: #000;
}

.cssplay-menu .sub dl dd a {
  color: #004040;
}

.cssplay-menu #c1:checked~#toggle:checked~.sub dl:nth-of-type(1),
.cssplay-menu #c2:checked~#toggle:checked~.sub dl:nth-of-type(2),
.cssplay-menu #c3:checked~#toggle:checked~.sub dl:nth-of-type(3),
.cssplay-menu #c4:checked~#toggle:checked~.sub dl:nth-of-type(4),
.cssplay-menu #c5:checked~#toggle:checked~.sub dl:nth-of-type(5),
.cssplay-menu #c6:checked~#toggle:checked~.sub dl:nth-of-type(6),
.cssplay-menu #c7:checked~#toggle:checked~.sub dl:nth-of-type(7),
.cssplay-menu #c8:checked~#toggle:checked~.sub dl:nth-of-type(8),
.cssplay-menu #c9:checked~#toggle:checked~.sub dl:nth-of-type(9) {
  top: 20px;
  opacity: 1;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5) 0.5s;
  transition: opacity 0.5s ease, top 0.5s ease 0.5s;
}

.cssplay-menu #c1:checked~#toggle:checked~.sub,
.cssplay-menu #c2:checked~#toggle:checked~.sub,
.cssplay-menu #c3:checked~#toggle:checked~.sub,
.cssplay-menu #c4:checked~#toggle:checked~.sub,
.cssplay-menu #c5:checked~#toggle:checked~.sub,
.cssplay-menu #c6:checked~#toggle:checked~.sub,
.cssplay-menu #c7:checked~#toggle:checked~.sub,
.cssplay-menu #c8:checked~#toggle:checked~.sub,
.cssplay-menu #c9:checked~#toggle:checked~.sub {
  height: 250px
}

<div class="cssplay-menu">
  <div>
    <input type="radio" id="c1" name="segment" checked="checked">
    <input type="radio" id="c2" name="segment">
    <input type="radio" id="c3" name="segment">
    <input type="radio" id="c4" name="segment">
    <input type="radio" id="c5" name="segment">
    <input type="radio" id="c6" name="segment">
    <input type="radio" id="c7" name="segment">
    <input type="radio" id="c8" name="segment">
    <input type="radio" id="c9" name="segment">
    <input type="checkbox" id="toggle" checked="checked">
    <div class="holder">
      <div class="segment">
        <label for="c1"><span></span></label>
        <label for="c2"><span></span></label>
        <label for="c3"><span></span></label>
        <label for="c4"><span></span></label>
        <label for="c5"><span></span></label>
        <label for="c6"><span></span></label>
        <label for="c7"><span></span></label>
        <label for="c8"><span></span></label>
        <label for="c9"><span></span></label>
      </div>
      <div class="curve-lower">
        <div class="curve"></div>
      </div>
      <div class="curve-upper"></div>
      <label for="toggle" class="center"></label>
    </div>
    <div class="sub">
      <dl>
        <dt>SUB MENU #1</dt>
        <dd><a href="#url">Item #1.1</a></dd>
        <dd><a href="#url">Item #1.2</a></dd>
        <dd><a href="#url">Item #1.3</a></dd>
        <dd><a href="#url">Item #1.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #2</dt>
        <dd><a href="#url">Item #2.1</a></dd>
        <dd><a href="#url">Item #2.2</a></dd>
        <dd><a href="#url">Item #2.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #3</dt>
        <dd><a href="#url">Item #3.1</a></dd>
        <dd><a href="#url">Item #3.2</a></dd>
        <dd><a href="#url">Item #3.3</a></dd>
        <dd><a href="#url">Item #3.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #4</dt>
        <dd><a href="#url">Item #4.1</a></dd>
        <dd><a href="#url">Item #4.2</a></dd>
        <dd><a href="#url">Item #4.3</a></dd>
        <dd><a href="#url">Item #4.4</a></dd>
        <dd><a href="#url">Item #4.5</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #5</dt>
        <dd><a href="#url">Item #5.1</a></dd>
        <dd><a href="#url">Item #5.2</a></dd>
        <dd><a href="#url">Item #5.3</a></dd>
        <dd><a href="#url">Item #5.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #6</dt>
        <dd><a href="#url">Item #6.1</a></dd>
        <dd><a href="#url">Item #6.2</a></dd>
        <dd><a href="#url">Item #6.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #7</dt>
        <dd><a href="#url">Item #7.1</a></dd>
        <dd><a href="#url">Item #7.2</a></dd>
        <dd><a href="#url">Item #7.3</a></dd>
        <dd><a href="#url">Item #7.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #8</dt>
        <dd><a href="#url">Item #8.1</a></dd>
        <dd><a href="#url">Item #8.2</a></dd>
        <dd><a href="#url">Item #8.3</a></dd>
        <dd><a href="#url">Item #8.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #9</dt>
        <dd><a href="#url">Item #9.1</a></dd>
        <dd><a href="#url">Item #9.2</a></dd>
        <dd><a href="#url">Item #9.3</a></dd>
        <dd><a href="#url">Item #9.4</a></dd>
      </dl>
    </div>
  </div>
</div>