用边界半径和线连接圆

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

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

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

Answer 2

同意@marsh 的观点，它可以用 css 伪元素来解决，但最好将样式应用于 .circle class，这样你就可以随意添加任意数量的圆圈不改变 css:

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

:not 选择器将允许从 .main

的 :last-child 中删除虚线

Demo fiddle

Answer 3

您可以将伪元素与 :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 4

这是解决方案

JSFIddle

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

}

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

用边界半径和线连接圆

connect circles with border radius and lines

html

css

css-shapes