html - 如何在 CSS 中使用边框制作管道

Question

也许看到上面的标题你们有些人会感到困惑，但正如标题所说，我想使用CSS来实现这个管道设计，我想我可以使用来实现它border 但如何添加如下图所示的圆形元素符号？

为了更容易，我的布局将如下所示:

1. 第一行:图像 1 和文本

2. 第二行:文本和图像 2

3. 第三行:图像 3 和文本

4. 第四行:图像 4

所以这是我想问的一些问题:

1. 我可以使用边框制作这种线条吗？

2. 如何让线条像图 4 之前那样停在中间？

3. 如何使元素符号位于线条中间，即使我们在某些设备中检查它(不包括 576px 左右的移动 View )，也能与线条匹配？

有人可以帮我解决这个问题吗？对于第一个问题，我认为我们可以使用

1. First Row :
border-right: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-right-radius : 10px;

2. second Row :
border-left: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-left-radius : 10px;

3. Third Row :
border-right: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-right-radius : 10px;

4. Fourth Row : 
border-left: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-left-radius : 10px;
width: 50% (?)

编辑 1对于问题一，目前我编写的 CSS 代码如下:

#first-row-left{
    border-left: solid 3px blue;
    border-bottom: solid 3px blue;
    border-bottom-left-radius: 20px
}

#first-row-right{
    border-bottom: solid 3px blue;
}

#second-row-left{
    border-bottom: solid 3px blue;

}

#second-row-right{
    border-right: solid 3px blue;
    border-bottom: solid 3px blue;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px
}

#third-row-left{
    border-left: solid 3px blue;
    border-bottom: solid 3px blue;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px

}

看起来像这样

正如您所看到的，在管道更改行(如从第一行更改为第二行)之前有轻微的遗漏

编辑2我已经为此做了一个 fiddle ，你可以在这里尝试一下:

Click here to see the fiddle

编辑3基于@Alexwc_，我尝试将他的代码更改为CSS而不是SCSS，但似乎我在这里错过了一些东西

将 @Alexwc_ 转换为 CSS 后的 SCSS:

这是我制作的 fiddle :Check in here

Answer 1

这是一种方法。也许不是最干净的，而且它还没有适应移动设备。

Here is a pen of the work using SCSS.

Here is a pen of the work using CSS. (请注意，我使用 this tool 将 SCSS 转换为 CSS)

注意事项:

1. 这没有放入 SO 代码段中，因为(无论出于何种原因)它无法正确显示。
2. 我仅在 Mac OS Chrome/Chrome Canary/FF/FFDE/Safari 上进行了测试
3. 在 CodePen 上我使用了 SCSS
4. 我的 CSS/SCSS/变量可能会引起一些窃笑，因为我不是这方面的专家，而且感觉有点老套……但也许其他边缘情况可能会引起同样的感觉。
5. 当我写这篇文章时，我没有看到您发布了自己的标记。对此表示歉意。
6. 可以按照您喜欢的方式编辑元素符号，我认为元素符号样式并不是这里的真正问题。

CSS:

:root {
    --width: 5px;
    --border-radius: calc(var(--width) * 2);
    --button-width: 30px;
    --button-left-pos: -12.5px;
}

.row {
    margin: 0 20px;
}

img {
    border-radius: 10px;
}

.one, .two, .three, .four {
    position: relative;
}
.one::before, .one::after, .two::before, .two::after, .three::before, .three::after, .four::before, .four::after {
    position: absolute;
    top: var(--button-width);
    left: var(--button-left-pos);
    content: "";
    height: 30px;
    width: 30px;
    background: black;
    border-radius: 100px;
}
.one::after, .two::after, .three::after, .four::after {
    width: calc( var(--button-width) / 2 );
    height: calc( var(--button-width) / 2 );
    background: red;
    top: calc(var(--button-width) + var(--button-width) / 4 );
    left: -5px;
}

.two::before, .two::after {
    right: var(--button-left-pos);
    left: initial;
}
.two::after {
    right: -5px;
}

.one::after {
    width: calc( var(--button-width) / 2 );
    height: calc( var(--button-width) / 2 );
    background: red;
    top: calc(var(--button-width) + var(--button-width) / 4 );
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "left right";
    position: relative;
}
.row:last-child {
    grid-template-areas: "border ..." "full full";
}
.row .left, .row .right {
    padding: var(--button-width);
}

.one .left {
    padding-top: 0;
    border-left: var(--width) solid;
    border-bottom: var(--width) solid;
    border-bottom-left-radius: var(--width);
}

.two {
    top: calc(var(--width) * -1);
}
.two .right {
    border-right: var(--width) solid;
    border-top: var(--width) solid;
    border-top-right-radius: var(--width);
    border-bottom-right-radius: var(--width);
    border-bottom: var(--width) solid;
}

.three {
    top: calc(var(--width) * -2);
}
.three .left {
    border-left: var(--width) solid;
    border-top: var(--width) solid;
    border-top-left-radius: var(--width);
    border-bottom-left-radius: var(--width);
}

.four {
    top: calc(var(--width) * -3);
}
.four::before, .four::after {
    top: 85px;
}
.four::before {
    left: calc(50% - 17.5px);
}
.four::after {
    top: 92.5px;
    left: calc(50% - 10.5px);
}
.four .border {
    height: 200px;
    display: block;
    border-right: var(--width) solid;
    border-top-right-radius: var(--width);
    position: relative;
}
.four .border::before {
    content: "";
    position: absolute;
    height: var(--width);
    background: black;
    top: 0;
    width: calc(100% + var(--width));
    transform: rotate(180deg);
    border-bottom-left-radius: var(--width);
    border-top-right-radius: var(--width);
}

.border {
    grid-area: border;
}

.full-width {
    grid-area: full;
    justify-self: center;
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

HTML:

<div class="row one">
    <div class="left">
      <img src="https://via.placeholder.com/450x250" alt="">

    </div>
    <div class="right">
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <!-- one -->
  <div class="row two">
    <div class="left">
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
    <div class="right">
      <img src="https://via.placeholder.com/450x250" alt="">
    </div>
  </div>
  <!-- two -->
  <div class="row three">
    <div class="left">

      <img src="https://via.placeholder.com/450x250" alt="">

    </div>
    <div class="right">
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <!-- three -->
  <div class="row four">
    <div class="border border-top"></div>
    <div class="full-width">
      <img src="https://via.placeholder.com/900x500" alt=""></div>
  </div>
  <!-- four -->