Taras Yaremkiv Taras Yaremkiv - 1 month ago 8
CSS Question

How to make parts of div border invisible

Good day to everyone. Just don't know how to remove central part of div#additionalBorder. I thought I could do it with inner div#partition but got stuck. Is it possible to do it in such way?
Or may be I should use pseudo elements ::before.
Here 's screen of what I mean: enter image description here



#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

#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>

Comments