删除内部的圆线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>
答
添加这两个设置:
#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>
答
简单地改变行的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-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>