创建一条中间有圆圈的线

Question

所以，我正在努力实现这个结果：

这是我尝试时得到的结果：https://jsfiddle.net/wvdkmjge/

.container {
  width: 100px;
  height: 1px;
  background-color: black;
}
.circle {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: solid 1px black;
  border-radius: 50%;
}

<div class="container">
  <div class="circle">

  </div>
</div>

此外，我希望我不会在圆圈上看到边框线。有什么建议吗？

Answer 1

如果要根据其父元素定位元素，请对父元素使用 position:relative，然后为子元素添加相对位置或绝对位置。要在中间居中，使用 margin:0 auto 如果它有绝对定位也添加 left:0; right:0;

https://jsfiddle.net/azizn/e4ev3awj/1/

.container {
    width: 100px;
    height: 1px;
    background-color: blue;
    position:relative;
}
.circle {
    display:inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    background:blue;
    left:0;
    right:0;
    margin:0 auto;
    border-radius: 100%;
    top:-4px;
}

<div class="container">
<div class="circle">

</div>
</div>

Answer 2

对 position 元素的代码稍作修改，即可获得想要的效果。

.container {
  width: 100px;
  height: 1px;
  background-color: black;
  position: relative;
}
.circle {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-color: white;
  border: solid 1px black;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: calc(50% - 5px);
}
.blue {
  margin-top: 20px;
  background: #3EB2EF;
}
.blue .circle {
  background: #3EB2EF;
  border-color: #3EB2EF;
}

<div class="container">
  <div class="circle">

  </div>
</div>

<div class="container blue">
  <div class="circle">

  </div>
</div>

Answer 3

试试这个：

.container {
  width: 100px;
  height: 1px;
  background-color: black;
  position: relative;
}
.circle {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: solid 1px black;
  border-radius: 50%;
}

<div class="container">
  <div class="circle">

  </div>
</div>

Answer 4

Fiddle

这使用了很多与上面不同的代码。

class:before and class:after

希望对您有所帮助！

Answer 5

回答有点晚，但这看起来像一个典型的 <hr/> 需要一些化妆。

/* restyle however your needs are hr and its pseudo elements , here only one is used */
hr {
  color: turquoise;
  border-width: 3px;
  margin: 1em;
  box-shadow: 0 0 5px gray;
}
hr:before {
  content: '';
  border-radius: 100%;
  position: absolute;
  height: 20px;
  width: 20px;
  background: turquoise;
  left: 50%;
  margin: -10px;
  box-shadow: inherit
}

<hr/>

创建一条中间有圆圈的线

Creating a line with circle in the middle

html

css

css-shapes