удалить строку внутри круга div

У меня есть четыре круга в ряду в каждом круге, один значок существует в середине круга. Я рисую красную линию, используя псевдо классы в css. это красная линия пересекает круг посередине. я просто хочу, чтобы эта красная линия не показывать внутри круга, но показывает из стороны в circle.i думает, что много, но не может найти какое-либо решение-худалить строку внутри круга div

#services .block .icon-block { 
 
    border: 4px solid yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border-radius: 50%; 
 
    margin:0 auto; 
 
} 
 
#services .block .icon-block a { 
 
    font-size: 25px; 
 
} 
 
#services .block .upper-block::before{ 
 
    border: 2px solid red; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head 
 
<body> 
 
<section id="services"> 
 
    <div class="container block"> 
 
     <div class="row"> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 
<!-- end (services) --> 
 
</body> 
 
</html>

источник

2016-06-13 Hamza Qaisrani

Добавьте эти два параметра:

#services .block .icon-block { 
    background: #fff; 
} 
#services .block .upper-block::before{ 
    z-index: -1; 
}

Они перемещают красную линию на фон (с помощью отрицательного z-index значения) и сделать круг области непрозрачными (т.е. охватывающий красную линию)

#services .block .icon-block { 
 
    border: 4px solid yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border-radius: 50%; 
 
    margin:0 auto; 
 
    background: #fff; 
 
} 
 
#services .block .icon-block a { 
 
    font-size: 25px; 
 
} 
 
#services .block .upper-block::before{ 
 
    border: 2px solid red; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    z-index: -1; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head 
 
<body> 
 
<section id="services"> 
 
    <div class="container block"> 
 
     <div class="row"> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 
<!-- end (services) --> 
 
</body> 
 
</html>

источник

2016-06-13 00:13:19 Johannes

Просто измените Z-индекс строки и добавьте белый фон в круг. Смотри ниже.

#services .block .icon-block { 
 
    border: 4px solid yellow; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border-radius: 50%; 
 
    margin:0 auto; 
 
    background-color: white; 
 
} 
 
#services .block .icon-block a { 
 
    font-size: 25px; 
 
} 
 
#services .block .upper-block::before{ 
 
    border: 2px solid red; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    z-index: -99; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head 
 
<body> 
 
<section id="services"> 
 
    <div class="container block"> 
 
     <div class="row"> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-3 upper-block"> 
 
       <div class="icon-block"> 
 
        <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 
<!-- end (services) --> 
 
</body> 
 
</html>

источник

2016-06-13 00:12:28 4m1r

удалить строку внутри круга div

ответ

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