html - How to create a curved line with gradient?

Question

I'm trying to insert a curve in the middle of a div, so i can achieve this result:

This is what i did so far.

.back{
  background-color: grey;
  width: 100%;
  height: 200px;
  display: inline-grid;
  align-items: center;
  overflow: hidden;
}

.line{
  height: 3px;
  background: linear-gradient(to right, yellow, purple, blue, green, red, orange);
  transform: rotate(-10deg);
}

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

Answer 1

Without gradient and with transparency you can consider pseudo element and border-radius. Each pseudo element will create half the curve and you join them to create the illusion of a continuous curve.

.box {
  height:150px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */
  --r:90px; /* The curve radius */
  --w:60%;  /* The width of the left part (i.e distance of the curve from the left) */
  --c:red;  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l)); /* each one will take half the height minus border width*/
  border-style:solid;
  border-color:var(--c);
}
/* Left part */
.box:before {
   bottom:0;
   left:0;
   width:var(--w);
   border-width:0 var(--l) var(--l) 0; /* Right & Bottom*/
   border-radius:0 0 var(--r) 0; /* Bottom-right*/
}
/* Right part*/
.box:after {
   top:0;
   right:calc(-1 * var(--l)); /* Move slightly to the right to have a perfect join */
   width:calc(100% - var(--w));
   border-width:var(--l) 0 0 var(--l); /* Top & Left */
   border-radius:var(--r) 0 0 0; /* Top-Left*/
}

body {
 background:pink;
}

<div class="box">
</div>

<div class="box" style="--r:40px;--l:5px;--w:70%;--c:green">
</div>

<div class="box" style="--r:100px;--l:2px;--w:100px;--c:blue">
</div>