html – 创建连接的圈子

我需要创建这个图像：

它包含附有线条的圆圈.我画了红色框以显示它们是div,因为当它在移动设备上显示时它应该如下所示：

我已经尝试过做what this post says,但它对我不起作用,因为李的woudl不在同一个div中.

这是我的代码：

.steps {
  max-width: 1170px;
  margin: auto;
  overflow: auto;
}
.step-1,.step-2,.step-3,.step-4 {
  width: 25%;
  float: left;
}

<div class="steps">
  <div class="step-1"><div class="step-image">
      <img src="step1.jpg">

如何使用连接它们的线创建圆圈？

最佳答案

以下解决方案适用于带线的版本.
删除行放置内容：无;在媒体查询下.

section {
  display: inline-block;
  width: 25%;
  text-align: center;
}

div {
  margin: .5em;
  border: 1px solid red;
  padding: .5em;
  position: relative;
}

a {
  display: inline-block;
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;
  background: silver;
}

a:before,a:after {
  content: "";
  position: absolute;
  border-top: 1px solid;
  margin-top: 1em;
  z-index: -1;
}

a:before {
  margin-left: -1px;
  left: -.5em;
  right: 50%;
}

a:after {
  margin-right: -1px;
  left: 50%;
  right: -.5em;
}

section:first-child a:before,section:last-child a:after {
  content: none;
}

<main>
  <section><div>
      <p>Some content

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!