div 테두리 부분을 보이지 않게 만드는 방법

모두에게 좋은 하루. div # additionalBorder의 중앙 부분을 제거하는 방법을 모르겠다. 나는 내면 div # 파티션으로 할 수 있다고 생각했지만 막혔다. 그런 식으로 할 수 있습니까? 또는 전에 pseudo elements ::를 사용해야 할 수도 있습니다. 무슨 뜻인지의 다음의 화면이 : div 테두리 부분을 보이지 않게 만드는 방법

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

출처

2016-10-25 Taras Yaremkiv

? 예상되는 출력 이미지를 제공 할 수 있습니까? – Harry

무엇을 원하십니까 plz 짧게 –

솔직히 말해서, 이것은 HTML과 CSS를 지나치게 복잡하게 만듭니다. SVG를 사용하는 것이 더 나을 것입니다. - http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side –

난 그냥이 클래스를 변경합니다. "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>

정확히 중앙 부분에 의해 무슨 뜻 이죠

출처

2016-10-25 08:32:20

어려운 일이 아니라면 어떻게 했습니까? 다른 사람들에게는 더 명확하게 찾을 것입니다. –

미안 타 라스, 한 손으로 일하고있었습니다. 나는 내 대답을 편집하고있다. –

div 테두리 부분을 보이지 않게 만드는 방법

답변

관련 문제