Как сделать части границы div невидимыми

Добрый день всем. Просто не знаю, как удалить центральную часть div # extraBorder. Я думал, что смогу сделать это с внутренним div # partition, но застрял. Можно ли это сделать таким образом? Или может быть, я должен использовать псевдо элементы :: before. Вот экран, что я имею в виду: Как сделать части границы 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» и добавьте границу, граничный радиус в «.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 невидимыми

ответ

Смежные вопросы