Как скрыть линию под прозрачным блоком?

330

26 ноября 2016, 18:40

Нужно скрыть линию в полукруге, но не заливая его белым цветом. Как это сделать? Пытался добавлять линии через before и after абсолютно по 50% ширины, но это на адаптивно, на разных разрешениях линия разной длины получалась.

.complex { 
  padding: 100px 0; 
} 
.line-box { 
  border-bottom: 2px solid #3962b5; 
  position: relative; 
} 
.ico-complex-box { 
  width: 130px; 
  height: 130px; 
  position: absolute; 
  left: 0; 
  right: 0; 
  margin: auto; 
  top: 0; 
  bottom: 0; 
  background-color: transparent; 
} 
.ico-complex-box:before { 
  content: ""; 
  width: 130px; 
  height: 130px; 
  top: 0; 
  right: 0; 
  border-radius: 50%; 
  border: 2px solid #3962b5; 
  position: absolute; 
  clip: rect(auto, auto, 65px, 65px); 
} 
.ico-complex-box:after { 
  content: ""; 
  width: 130px; 
  height: 130px; 
  border-radius: 50%; 
  border: 1px solid #3962b5; 
  position: absolute; 
  top: 0; 
  left: 0; 
  clip: rect(auto, 65px, 65px, auto); 
}

<section class="complex"> 
  <div class="top-line-box"> 
    <div class="line-box"> 
      <div class="ico-complex-box"> 
 
      </div> 
    </div> 
  </div> 
</section>

Answer 1

.complex { 
  padding: 100px 0; 
} 
.line-box { 
  position: relative; 
} 
 
.line-box:before, 
.line-box:after { 
  content: ''; 
  display: block; 
  height: 2px; 
  width: calc(50% - 65px); 
  background: #3962b5; 
  position: absolute; 
    bottom: 0; 
} 
 
.line-box:after { 
  right: 0; 
} 
 
.ico-complex-box { 
  width: 130px; 
  height: 130px; 
  position: absolute; 
  left: 0; 
  right: 0; 
  margin: auto; 
  top: 0; 
  bottom: 0; 
  background-color: transparent; 
} 
 
.ico-complex-box:before { 
  content: ""; 
  width: 130px; 
  height: 130px; 
  top: 0; 
  right: 0; 
  border-radius: 50%; 
  border: 2px solid #3962b5; 
  position: absolute; 
  clip: rect(auto, auto, 65px, 65px); 
} 
 
.ico-complex-box:after { 
  content: ""; 
  width: 130px; 
  height: 130px; 
  border-radius: 50%; 
  border: 2px solid #3962b5; 
  position: absolute; 
  top: 0; 
  left: 0; 
  clip: rect(auto, 65px, 65px, auto); 
}

<section class="complex"> 
  <div class="top-line-box"> 
    <div class="line-box"> 
      <div class="ico-complex-box"> 
 
      </div> 
    </div> 
  </div> 
</section>