html - 我需要画 2 个用线连接的圆圈？仅在 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>