如何在纯 CSS 中制作这条线？

Question

I tried use this:

border: 1px solid #7BE34A;
box-shadow: 0px 4px 25px rgba(123, 227, 74, 0.25);

border: 1px solid #28780D;
box-shadow: 0px 4px 25px rgba(40, 120, 13, 0.25);

from figma, but it doesn't work

Answer 1

idk if this is what you are looking for, but here is an example:

 .line { border-top: 1px solid #000; position: relative; width: 100px }.line:after { content: ""; position: absolute; border-right: 1px solid #000; height: 10px; right: 0; bottom: 0; }.line:before { content: ""; position: absolute; border-top: 1px solid #000; height: 10px; width: 100px; right: -100%; bottom: 110%; }

 <br> <div class="line"> </div>

Answer 2

I made it using a grid... So you can adjust dimentions easilly.
And there is a place for your title, so it will follow the lines responsively.

 body{ background-color: #01383A; }.myHeader { width: 100%; display: grid; grid-template-columns: 30% 6px 1fr; /* Adjust horizontal dimentions here - particularly for the title */ grid-template-rows: 2.5em 6px 10px 6px; /* Adjust vertical dimentions here */ grid-auto-flow: column; }.title { grid-column: 1; grid-row: 1; text-align: right; padding-right: 10px; font-size: 2em; color: #ffffff; }.lines-part-a { grid-column: 1; grid-row: 2 / 4; border-bottom: 1px solid #358341; border-right: 1px solid #358341; }.lines-part-b { grid-column: 2 / 5; grid-row: 2 / 4; border-top: 1px solid #358341; }.lines-part-c { grid-column: 1 / 3; grid-row: 3 / 5; border-bottom: 1px solid #10512A; border-right: 1px solid #10512A; }.lines-part-d { grid-column: 3 / 5; grid-row: 3 / 5; border-top: 1px solid #10512A; }

 <div class="myHeader"> <div class="title">Take order</div> <div class="lines-part-a"></div> <div class="lines-part-b"></div> <div class="lines-part-c"></div> <div class="lines-part-d"></div> </div>

And here is a tiny variant... with some border-radiuses and dashes on each sides.
Just to demonstrate how fun a grid can be... ;)

 body{ background-color: #01383A; }.myHeader { width: 100%; display: grid; grid-template-columns: 100px 20% 4px 1fr 100px; grid-template-rows: 2.5em 4px 10px 4px; grid-auto-flow: column; }.title { grid-column: 1 / 3; grid-row: 1; text-align: right; padding-right: 10px; font-size: 2em; color: #ffffff; }.lines-dashed-a { grid-column: 1; grid-row: 3 / 4; border-bottom: 1px dashed #358341; }.lines-part-a { grid-column: 2 / 3; grid-row: 3 / 4; border-bottom: 1px solid #358341; border-right: 1px solid #358341; border-radius: 0 0 4px 0; }.lines-part-b { grid-column: 3 / 5; grid-row: 2 / 3; border-top: 1px solid #358341; border-left: 1px solid #358341; border-radius: 6px 0 0 0; margin-left: -1px; }.lines-dashed-b { grid-column: 5; grid-row: 2 / 3; border-top: 1px dashed #358341; }.lines-dashed-c { grid-column: 1; grid-row: 4 / 5; border-bottom: 1px dashed #10512A; }.lines-part-c { grid-column: 2 / 4; grid-row: 4 / 5; border-bottom: 1px solid #10512A; border-right: 1px solid #10512A; border-radius: 0 0 6px 0; }.lines-part-d { grid-column: 4 / 5; grid-row: 3 / 4; border-top: 1px solid #10512A; border-left: 1px solid #10512A; border-radius: 4px 0 0 0; margin-left: -1px; }.lines-dashed-d { grid-column: 5; grid-row: 3 / 4; border-top: 1px dashed #10512A; }

 <div class="myHeader"> <div class="title">Take order</div> <div class="lines-dashed-a"></div> <div class="lines-part-a"></div> <div class="lines-part-b"></div> <div class="lines-dashed-b"></div> <div class="lines-dashed-c"></div> <div class="lines-part-c"></div> <div class="lines-part-d"></div> <div class="lines-dashed-d"></div> </div>

Answer 3

I liked the challenge, so I tried to implement that, here is the result, it's not perfect, but it will help you get started.

 .container { background-color: #01383a; width: 600px; height: 140px; overflow: hidden; display: flex; align-items: center; }.line { height: 10px; width: 1px; background: #4fa445; position: relative; margin-left: 50%; box-shadow: 4px 4px 0 rgba(79, 164, 69, 0.5); }.line:before, .line:after { content: ""; display: block; height: 1px; width: 304px; background: #4fa445; position: absolute; box-shadow: 4px 4px 0 rgba(79, 164, 69, 0.5); }.line:before { right: 0; bottom: 0; }

 <div class="container"> <div class="line"></div> </div>