如何使div边界的部分看不见

Question

每个人都过得愉快。只是不知道如何删除 div＃additionalBorder 的核心部分。我以为我可以用内部 div＃partition 来做，但是卡住了。是否有可能以这种方式做到这一点？ 或者可能是我应该使用伪元素::之前。 这是我的意思的屏幕：

#outerCircle {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 560px;
  border: 2px dotted grey;
  position: relative;
}
.bigButton {
  height: 250px;
  width: 250px;
  border: solid #464646;
}
#greenButton {
  background-color: #23a846;
  border-radius: 100% 0 0 0;
  border-width: 20px 10px 10px 20px;
}
#redButton {
  background-color: #a50005;
  border-radius: 0 100% 0 0;
  border-width: 20px 20px 10px 10px;
}
#yellowButton {
  background-color: #a7a408;
  border-radius: 0 0 0 100%;
  border-width: 10px 10px 20px 20px;
}
#blueButton {
  background-color: #162da7;
  border-radius: 0 0 100% 0;
  border-width: 10px 20px 20px 10px;
}
div#innerCircle {
  border: 15px solid #464646;
  border-radius: 50%;
  position: absolute;
  top: 25%;
  right: 25%;
  background-color: aliceblue;
}
div.additionalBorder {
  margin: 4px;
  border: 2px solid black;
  border-radius: 50%;
  height: 238px;
  width: 238px;
  overflow: hidden;
}
p#tradeMark {
  margin: auto;
  height: 102px;
  text-align: center;
  font-size: 68px;
  font-family: myDirector;
  color: aliceblue;
  background-color: black;
  border-color: antiquewhite;
  line-height: 140px;
}
span#reg {
  font-size: 9px;
}
.partition {
  height: 7px;
}
.buttons {
  height: 130px;
  border-top: 2px solid black;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

<div id="outerCircle">
  <div class="bigButton" id="greenButton"></div>
  <div class="bigButton" id="redButton"></div>
  <div class="bigButton" id="yellowButton"></div>
  <div class="bigButton" id="blueButton"></div>
  <div class="bigButton" id="innerCircle">
    <div class="additionalBorder">
      <p id="tradeMark">simon<span id="reg">&reg;</span>
      </p>
      <div class="partition"></div>
      <div class="buttons"></div>
    </div>
  </div>

Answer 1

我只是改变了这个课程。我从“ div.additionalBorder ”中删除了边框，并将border，border-radius添加到“ .buttons ”。

div.additionalBorder {
  border-radius: 50%;
  margin: 4px;
  height: 242px;
  width: 242px;
  overflow: hidden;
}

.buttons {
  border: 2px solid black;
  border-radius: 0 0 130px 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#outerCircle {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 560px;
  border: 2px dotted grey;
  position: relative;
}
.bigButton {
  height: 250px;
  width: 250px;
  border: solid #464646;
}
#greenButton {
  background-color: #23a846;
  border-radius: 100% 0 0 0;
  border-width: 20px 10px 10px 20px;
}
#redButton {
  background-color: #a50005;
  border-radius: 0 100% 0 0;
  border-width: 20px 20px 10px 10px;
}
#yellowButton {
  background-color: #a7a408;
  border-radius: 0 0 0 100%;
  border-width: 10px 10px 20px 20px;
}
#blueButton {
  background-color: #162da7;
  border-radius: 0 0 100% 0;
  border-width: 10px 20px 20px 10px;
}
div#innerCircle {
  border: 15px solid #464646;
  border-radius: 50%;
  position: absolute;
  top: 25%;
  right: 25%;
  background-color: aliceblue;
}
div.additionalBorder {
  border-radius: 50%;
  margin: 4px;
  height: 242px;
  width: 242px;
  overflow: hidden;
}
p#tradeMark {
  margin: auto;
  height: 102px;
  text-align: center;
  font-size: 68px;
  font-family: myDirector;
  color: aliceblue;
  background-color: black;
  border-color: antiquewhite;
  line-height: 140px;
}
span#reg {
  font-size: 9px;
}
.partition {
  height: 7px;
}
.buttons {
border: 2px solid black;
border-radius: 0 0 130px 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

<div id="outerCircle">
  <div class="bigButton" id="greenButton"></div>
  <div class="bigButton" id="redButton"></div>
  <div class="bigButton" id="yellowButton"></div>
  <div class="bigButton" id="blueButton"></div>
  <div class="bigButton" id="innerCircle">
    <div class="additionalBorder">
      <p id="tradeMark">simon<span id="reg">&reg;</span>
      </p>
      <div class="partition"></div>
      <div class="buttons"></div>
    </div>
  </div>