How to make a curved line go from left to right to left down my document? Like my picture but not ha-CodePudding

I'm trying to get a green line to go down my document from left to right and back to left again.

Currently have three divs stacked and use border radius for the curves. However because this solution is three different divs, I can't get a continuous line using border radius.

Does anyone have a smarter solution?

Picture of what I have:

#featureHighlight {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.highlightedFeature {
  height: 150px;
  width: 96.5%;
}

#highlightedFeature1 {
  border-top: none;
  border-right: none;
  border-left: 5px solid #23ce6bff;
  border-bottom: 5px solid #23ce6bff;
  border-bottom-left-radius: 450px;
}

#highlightedFeature2 {
  border-top: none;
  border-right: 5px solid #23ce6bff;
  border-left: none;
  border-bottom: 5px solid #23ce6bff;
  border-top-right-radius: 450px;
  border-bottom-right-radius: 450px;
}

#highlightedFeature3 {
  border-top: none;
  border-right: none;
  border-left: 5px solid #23ce6bff;
  border-bottom: none;
  border-top-left-radius: 450px;
}

<div id="featureHighlight">
  <div id="highlightedFeature1" ></div>
  <div id="highlightedFeature2" ></div>
  <div id="highlightedFeature3" ></div>
</div>

CodePudding user response：

You can use various background-images created with linear-, radial- and conic- gradients.

This snippet gives an illustration where it's known that 4 horizontal lines are to be shown, with two left hand semi circles and one right hand one.

body {
  margin: 0;
  background-color: black;
  height: 100vh;
  width: 100vw;
  --l: 4px;
  /* the height of the green line */
  ;
  --a: calc(var(--l) / 2);
  --h: calc((100vh - var(--l)) / 3);
  /* define the height between horizontal lines (also = diameter of the circles)..*/
  --w: calc(100vw - var(--h));
  /*..from which we can calculate the width of the horizontal lines */
  --r: calc(var(--h) / 2);
  /* .and the radius of the circles) */
  --h2: calc(2 * var(--h));
  --minusr: calc(-1 * var(--r));
  background-image: linear-gradient(lime 0 var(--l), transparent var(--l) 100%), conic-gradient(black 50%, transparent 50% 100%), radial-gradient(transparent 0 calc(var(--r) - 2.5px), lime calc(var(--r) - var(--a)) calc(var(--r)   var(--a)), transparent calc(var(--r)   var(--a)) 100%), conic-gradient(transparent 50%, black 50% 100%), radial-gradient(transparent 0 calc(var(--r) - var(--a)), lime calc(var(--r) - var(--a)) calc(var(--r)   var(--a)), transparent calc(var(--r)   var(--a)) 100%);
  background-size: var(--w) var(--h), var(--h2) var(--h2), var(--h2) var(--h2), var(--h2) var(--h2), var(--h2) var(--h2);
  background-repeat: no-repeat repeat, no-repeat repeat, no-repeat repeat, no-repeat, no-repeat;
  background-position: center top, calc(var(--minusr)   var(--a)) calc(var(--minusr)   var(--a)), calc(var(--minusr)   var(--a)) calc(var(--minusr)   var(--a)), calc(100% - var(--r)   var(--h) - var(--a)) center, calc(100% - var(--r)   var(--h) - var(--a)) center;
}

<body></body>

This gives a background: