如何将线条连接到两个边框html/css

Question

大家早上好。我只想知道如何在html和css中做到这一点。：）到目前为止，我已经在我的网站上做到了这一点。我已经为此工作了好几天，但我找不到确切的方法。这是我的html代码：

<div class="container">
  <div class="col-md-2 col-md-offset-1"><img class="img-circle img-left" style="border: 5px solid #0766dc;" src="1.png"></div>
  <div class="col-md-2" id="gradient1"></div>
  <div class="col-md-2"><img class="img-circle img-center" style="border: 5px solid #00afdc;" src="2.png"></div>
  <div class="col-md-2" id="gradient2"></div>
  <div class="col-md-2"><img class="img-circle img-right" style="border: 5px solid #28ddb3;" src="3.png"></div>
</div>

这是我的css：

#gradient1 {
    display: block;
    background: linear-gradient(to right, #0766dc, #00afdc);
    height: 5px;
    margin-top: 100px;
}
#gradient2 {
    display: block;
    background: linear-gradient(to right, #00afdc, #28ddb3);
    height: 5px;
    margin-top: 100px;
}
.img-center {
    margin: auto;
}
.img-right {
    margin-right: auto;
}
.img-left {
    margin-left: auto;
}
.img-circle {
    display: block;
    padding: 10px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

Answer 1

这是一个简单的代码。您必须将元素调整为您想要的大小、重新着色等。

<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi</p></div>

<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 2</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 3</p></div>

调整大小时，请确保边框半径与高度和宽度大小相同。请注意，线div高度是圆div高度的一半。

Answer 2

当我运行您的代码时，它看起来不像所提供的图片。这些线几乎在圆圈的中间，在它们的左边。

你可以试试这样的东西：

<div class="circle"></div><div class="line"></div><div class="circle"></div>
.circle {
  height: 100px;
  width: 100px;
  border: 4px solid black;
  border-radius: 50%;
  display: inline-block;
  box-sizing: content-box;
}
.line {
  display: inline-block;
  border-top: 4px solid black;
  width: 100px;
  height: 50px;
  box-sizing: content-box;
}

确保html内联或内联块元素之间没有空格。

添加圆圈并随意更改大小、颜色等。您可能希望将其全部封装在一个具有最小宽度的div中，这样当屏幕变小时元素就不会被封装。

Answer 3

你太亲密了！：）但对于像这样的自定义内容，bootstrap是非常不稳定的，所以有时您必须覆盖一些属性。

所以，问题是bootstrap在它的元素上设置了一个填充，这就是你的圆圈之间有空格的原因：

要解决这个问题，只需创建一个新类：

<div class="col-md-2 outer">

并应用这样的风格：

.outer {
      padding:0;
}

我在代码中看到的另一个问题是手动设置图像的宽度和高度。但是具有类别col-md-2的div根据屏幕大小来调整它们的大小。因此，调整大小可能会导致重叠。因此，您必须考虑，如果您还将.outer的width/height设置为静态值。为了防止这种情况发生，您至少可以设置内部有圆圈的div的min-height和min-width。

查看jsfiddle上的解决方案：https://jsfiddle.net/w58L7ojL/（缩小以查看其工作情况）