How to make this line in pure CSS?-CodePudding

enter image description here

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

CodePudding user response：

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 >
</div>

CodePudding user response：

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 >  
  <div ></div>
</div>

CodePudding user response：

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 >
  <div >Take order</div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></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 >
  <div >Take order</div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>