使用伪元素在圆的每一边的响应线

Question

我想使用 CSS 在对象之前/之后创建响应式条带。
这是理想的结果：

左边的条纹应该从视口的左角开始，然后转到圆形对象，可能在它下面，但不能再进一步了。

右条纹应从圆角或圆的末端开始，并相对结束。

我尝试了不同的方法，但无法使其工作，我无法指定以像素为单位的线宽，因为我需要它们根据屏幕大小进行缩放。

https://jsfiddle.net/krLdw2kj/3/

也请查看此处的代码段。

＆＃13;

＆＃13;

.circle-image {
  height: 100px;
  width: 100px;
}
.row-wrapp {
  position: relative;
}
.wrapper--left {
  position: relative;
  text-align: left;
  padding-left: 20%;
}
.wrapper--right {
  position: relative;
  text-align: right;
}
.wrapper--left::before {
  content: "";
  width: 30%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50px;
  color: #000;
  background-color: #000;
}
.wrapper--right::after {
  content: "";
  width: 50%;
  height: 1px;
  position: absolute;
  right: 0;
  top: 50px;
  color: #000;
  background-color: #000;
}

＆＃13;

<div class="container-fluid">
  <div class="row row-wrapp">
    <div class="col-sm-6 wrapper--left">
      <img src="http://i.imgur.com/ZrMo4RT.png" class="circle-image" />
    </div>
    <div class="col-sm-6 wrapper--right">
      <img src="http://i.imgur.com/ZrMo4RT.png" class="circle-image" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我尝试使用不同的值，但问题是这些圆圈将相对左右对齐。在中心对齐的情况下，可以将条带的宽度设置为50并且将其设置为50。

Answer 1

您可以使用Line before and after title over image的方法在圆圈的每一侧划一条线。这是一个例子：

＆＃13;

＆＃13;

.wrap{
  text-align:center;
  overflow:hidden;
}
.wrap::before, .wrap::after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 -100px 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
.wrap::after {
  margin: 0 -55% 0 -100px;
}
.wrap img{
  width:100px; height:100px;
  vertical-align: middle;
  position:relative;
  z-index:1;
  margin:0 50px;
}

＆＃13;

<div class="wrap">
  <img src="http://i.imgur.com/ZrMo4RT.png"/>
  <img src="http://i.imgur.com/ZrMo4RT.png"/>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你可以做到的一种方式https://jsbin.com/tavihu/edit?html,css,output

您也可以使用flexbox而不是浮点数。真的取决于你究竟想要做什么。