堆栈内存溢出
  简体   繁体   English

如何使用 CSS 中的边框制作管道

[英]How can I make A Pipeline Using Border In CSS

 原文  2019-12-04 06:31:27  2   5    html/ css

问题描述

Maybe from the title above some of you will become confused, But it exactly as the title said, I want to make this pipeline design using CSS , I think I can achieve it using border but how can I add the round bullet like in the image below?也许从上面的标题中有些人会感到困惑，但正如标题所说，我想使用 CSS进行此管道设计，我想我可以使用border来实现它，但是如何添加图像中的圆形项目符号以下？

我想做的蓝色管道

to make it easier, my layout will look like this:为方便起见，我的布局将如下所示：

  1. First row : Image 1 & text第一行：图像 1 和文本

  2. second row : Text & Image 2第二行：文本和图像 2

  3. Third row : Image 3 & text第三行：图像 3 和文本

  4. fourth row : Image 4第四行：图4

so this is some question I want to ask :所以这是我想问的一些问题：

  1. Can I make this kind of line using the border?我可以使用边框制作这种线条吗？

  2. How can I make the line stop in the middle like before the Image 4?我怎样才能让这条线像图 4 一样停在中间？

  3. How can I make the bullet in the middle of the line that will match the line even when we check it in some device (exclude the mobile view around 576px)?即使我们在某些设备中检查它（不包括大约 576px 的移动视图），我怎样才能使项目符号在线的中间与该行匹配？

Can someone help me with this problem?有人可以帮我解决这个问题吗？ for the first question , I think we can use对于第一个问题，我认为我们可以使用

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% (?)

Edit 1 for question one currently I make this CSS code like this:编辑 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

}

and it looks like this它看起来像这样

这是我使用边框时的当前进度

As you can see there is slight miss in before the pipeline change the row like from first to second row正如您所看到的，在管道将行从第一行更改为第二行之前有轻微的遗漏

Edit 2 I already make a fiddle for this, you can try it in here:编辑 2我已经为此做了一个小提琴，你可以在这里尝试：

Click here to see the fiddle单击此处查看小提琴

Edit 3 Based on @Alexwc_ , I tried to change his code into CSS intead of SCSS, but it seems I miss something in here编辑 3基于 @Alexwc_ ，我试图将他的代码更改为 CSS intead SCSS，但似乎我在这里错过了一些东西

SCSS from @Alexwc_ after I convert it to CSS:将来自@Alexwc_ 的 SCSS 转换为 CSS 后：

this is the fiddle I made : Check in here这是我制作的小提琴：在这里检查

5 个解决方案

解决方案1
 3  2019-12-04 06:42:56

You may consider using SVG.您可以考虑使用 SVG。 Following code is a sample code to draw path and circle.以下代码是绘制路径和圆的示例代码。

<!DOCTYPE html>
<html>
<body>

<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

解决方案2
 2  2019-12-04 07:30:15

`#first-row-left:before
{
 content: '';
 display: inline-block;
 position: absolute;
 border-radius: 50%;
 left: 0;
 width: 10px;
 height: 10px;
 z-index: 3;
 top: 25px;
}`

try something like this...尝试这样的事情......

解决方案3
 2 已采纳  2019-12-04 20:13:43

Here's one method.这是一种方法。 Perhaps not the cleanest, and it hasn't been adapted for mobile.也许不是最干净的，而且它还没有适应移动设备。

Here is a pen of the work using SCSS.这是使用 SCSS 的工作笔。

Here is a pen of the work using CSS.这是使用 CSS 的工作之笔。 (Please note that I converted SCSS to CSS using this tool ) （请注意，我使用此工具将 SCSS 转换为 CSS）

CAVEATS:警告：

  1. this was not put into a SO snippet because (for whatever reason) it doesn't display correctly.这没有放入 SO 片段中，因为（无论出于何种原因）它无法正确显示。
  2. I've tested only on Mac OS Chrome/Chrome Canary/FF/FFDE/Safari我只在 Mac OS Chrome/Chrome Canary/FF/FFDE/Safari 上测试过
  3. On the CodePen I used SCSS在 CodePen 上我使用了 SCSS
  4. My CSS/SCSS/variables may cause some snickering as I'm no pro at it, and it feels a little hacky... but perhaps other edge-ish cases may cause the same feeling.我的 CSS/SCSS/变量可能会引起一些窃笑，因为我不擅长它，感觉有点 hacky...但也许其他边缘的情况可能会引起同样的感觉。
  5. I did not see that you had posted your own markup while I was writing this out.在我写这篇文章的时候，我没有看到你发布了自己的标记。 Apologies for that.对此表示歉意。
  6. The bullets can be edited to however you like, I figured the bullet styles weren't the real issue here.项目符号可以根据您的喜好进行编辑，我认为项目符号样式不是这里的真正问题。

CSS: 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: 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 -->

解决方案4
 1  2019-12-04 06:35:52

You can use the border-image property to draw a custom svg for your border.您可以使用border-image属性为您的边框绘制自定义svg 。 Have a look at this article to see an example.看看 这篇文章，看看一个例子。

解决方案5
 0  2019-12-04 06:42:45

The Round bullet can be done with an external div like圆形项目符号可以使用外部 div 完成，例如

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div id='bullet'></div>
    </body>
</html>

#bullet{
    background-color:#fff310;
    height:10px;
    width:10px;
    border-radius:50%;
    border:0.1px solid red;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 CSS 制作此按钮的边框样式？ - How can I make this button's border style using CSS? 如何制作CSS边框线 - How can I make a CSS border line 我怎样才能使这个边界到最后？ - How can i make this border to the end?CSS 我可以使用 CSS border-radius 属性制作椭圆吗？ - Can I make an ellipse using the CSS border-radius property? CSS：调整大小时如何使该表格适合边框？ - CSS: how can I make this table fit the border when resized? 如何制作像这样的css渐变和鼠标悬停边框 - How can I make a css gradient like this and mouseover border CSS 左边框在 safari 上不起作用我该怎么做？ - CSS border-left is not working on safari how can I make? 如何使用Javascript替换HTML中的CSS边框？ - How can I replace a CSS border in HTML using Javascript? 如何使用CSS擦除边框？ - How can I erase a border piece using CSS? 如何使用CSS制作边框三角形？ - How to make a border triangle using css?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM