我想连接带有虚线边框的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>
我想在下面的图片中找到类似的内容。
我怎样才能做到这一点?
答案 0 :(得分:2)
您可以将伪元素与: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>
答案 1 :(得分:1)
要实现此目的,您可以使用伪选择器:before
,并根据需要放置边框,例如DEMO
.main:before {
content:"";
position:absolute;
left: 45px;
right: 120px;
top: 70px;
border-top: 5px dotted #f00;
}
答案 2 :(得分:0)
同意@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}}删除虚线
答案 3 :(得分:0)
这是解决方案
<强> JSFIddle
.circle:after {
content:'- - - - - - - -';
position: absolute;
margin-top: 15px;
color: red;
}
.circle.last:after {
content: none;
}