用边界半径和线连接圆圈

Question

我想连接带有虚线边框的3个圆形图像。

我的代码：

<div class="main">
    <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png"  /></div>
    <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png" /></div>
    <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png" /></div>
</div>

jsfiddle code

我想在下面的图片中找到类似的内容。

我怎样才能做到这一点？

Answer 1

您可以将伪元素与:not伪选择器结合使用。

这将允许您添加多个圆类，并为三个以上的元素提供此效果。

.circle {
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: tomato;
  margin: 20px;
  position: relative;
  border: 3px solid silver;
}
.circle:not(:first-child):before {
  content: "";
  position: absolute;
  width: 40px;
  height: 0;
  border-bottom: 6px dashed blue;
  top: -webkit-calc(50% - 3px);
  top: calc(50% - 3px);
  left: -42px;
}
.wrapper {
  display: inline-block;
  background: #f2f2f2;
}
html,
body {
  text-align: center;
}

<div class="wrapper">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Answer 2

要实现此目的，您可以使用伪选择器:before，并根据需要放置边框，例如DEMO

.main:before {
    content:"";
    position:absolute;
    left: 45px;
    right: 120px;
    top: 70px;
    border-top: 5px dotted #f00;
}

Answer 3

同意@marsh它可以用css伪元素解决，但最好将样式应用到.circle类，这样你可以在不改变css的情况下冷添加任意数量的圆圈：

.main .circle:not(:last-child):after {
    content: "";
    display: block;
    position: relative;
    top: -35px;
    left: 70px;
    width: 60px;
    border: 2px dashed red;
}

:not选择器将允许从:last-child的{​​{1}}删除虚线

Demo fiddle

Answer 4

这是解决方案

<强> JSFIddle

.circle:after {
    content:'-   -   -   -   -   -   -   -';
    position: absolute;
    margin-top: 15px;
    color: red;

}

.circle.last:after {
    content: none;
}