html - 如何用圆 Angular div 屏蔽 "hr"行

Question

我需要这样的东西:

我用过bootstrap框架。在圆 div 后面应该看不到“hr”行(如图所示)。 css masking 有可能吗？？

我的代码如下:

.container.bg {
  background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
      background-size: cover;
  }
.about-info {
	padding-top:70px;
	padding-bottom:90px;
	position:relative
}
.about-info hr {
	position:absolute;
	width: 100%;
    right: 15px;
    left: 15px;
    top: 40%;
    z-index: 1;
}
.about-info .text {
	width:100px;
	height:100px;
	background:rgba(153,153,153,0.5);
	border-radius:100%;
	text-align:center;
	line-height:14;
	margin:0 auto
}
.about-info .text span {
	display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
	font-family:helverticacb;
	color:#fff;
	font-size:20px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
  </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

这是一个使用 flex-box 的解决方案

您可能想要对其进行一些调整(注意: flex 宽度和高度在不同尺寸的视口(viewport)上可能会以不同的方式缩放

.container.bg{
  font-size:5em;  
}
.flex-container {
  min-height:5em;
  background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
  background-size: cover;
  display: flex;
  /*makes the container a flex-box*/
  flex-direction: row;
  align-items: center;
  /* centers the stuff V*/
}
.hr {
  flex-grow: 2;
  /* make the rules 2x the width as circles*/
  height: 2px;
  border: 1px solid #ccc;
}
.text {
  font-family: impact;
  font-size: .3em;
}
.about-info {
  padding-top: 70px;
  padding-bottom: 90px;
  /*position: relative*/
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, .5);
  border-radius: 100%;
  text-align: center;
  flex-grow: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container bg">
  <div class="flex-container">
    <div class="about-info">
      <div class="text "><span>Honesty</span>
      </div>
    </div>
    <div class="hr"></div>
    <div class="about-info">
      <div class="text "><span>Transparency</span>
      </div>
    </div>
    <div class="hr"></div>
    <div class="about-info">
      <div class="text "><span>Integrity</span>
      </div>
    </div>
  </div>

</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>