我需要画两条连线的圆圈？在CSS中只有

Question

我需要绘制2圈与CSS连接，这样我会用航班搜索的网站，如果你可以让我给你回答这个就是我想要

纯CSS或materializecss感谢

Answer 1

这是为圆圈使用单个元素和伪元素的一般想法。他们过线的位置，并在该页面

body { 
 
    padding: 2em; 
 
} 
 
div { 
 
    background: blue; 
 
    height: 1px; 
 
    position: relative; 
 
} 
 
div:before, div:after { 
 
    position: absolute; 
 
    top: 50%; left: 0; 
 
    transform: translateY(-50%); 
 
    content: ''; 
 
    height: 1em; width: 1em; 
 
    border: 1px solid blue; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
} 
 

 
div:after { 
 
    left: auto; 
 
    right: 0; 
 
}

<div></div>

或者你可以父元素的突出位置的圆圈，而不是使用后台背景颜色相匹配的圆圈使用的背景颜色图片。

body { 
 
    padding: 2em; 
 
} 
 
div { 
 
    background: blue; 
 
    height: 1px; 
 
    position: relative; 
 
} 
 
div:before, div:after { 
 
    position: absolute; 
 
    top: 50%; left: 0; 
 
    transform: translate(-100%,-50%); 
 
    content: ''; 
 
    height: 1em; width: 1em; 
 
    border: 1px solid blue; 
 
    border-radius: 50%; 
 
} 
 

 
div:after { 
 
    left: auto; 
 
    right: 0; 
 
    transform: translate(100%,-50%); 
 
}

<div></div>