如何创建带有渐变的曲线？答案

【问题标题】：How to create a curved line with gradient?如何创建带有渐变的曲线？
【发布时间】：2021-02-03 22:00:27
【问题描述】：

我试图在 div 的中间插入一条曲线，所以我可以达到这个结果：

这是我到目前为止所做的。

.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>

【问题讨论】：

曲线需要渐变吗？你需要透明度吗？
好问题，背后有透明度可能会很好。
一个 svg 可能是一个较短的答案。
后面的透明度应该在没有渐变的情况下是可行的......并且在没有透明度的情况下渐变是可行的......如果你想要两者，那么一个 hacky 复杂的代码来了:)
我想要两个都拥有！哈哈，但如果可以选择，我希望有透明度。

标签： html css css-shapes

【解决方案1】：

没有渐变和透明度可以考虑伪元素和border-radius。每个伪元素都会创建一半的曲线，您可以将它们加入来创建连续曲线的错觉。

.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>

使用渐变且没有透明度，您可以依靠多种背景颜色来近似它。我们的想法是在下面有你想要的渐变，然后用其他层覆盖它以保持曲线可见：

.box {
  --w:4px;
  height:150px;
  position:relative;
  z-index:0;
  background:
    radial-gradient(farthest-side at bottom right,grey calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,grey) top 0 right calc(40% - 0.6*56px + var(--w)/2)/54px 50%,
    radial-gradient(farthest-side at top left,grey calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,grey)  bottom 0 left calc(60% - 0.4*56px + var(--w)/2)/54px 50%,
    
    
    linear-gradient(grey,grey) bottom right/calc(40% - 50px)  calc(100% - var(--w)),
    linear-gradient(grey,grey) bottom right/calc(40% - var(--w)/2 + 1px) 50%,
    linear-gradient(grey,grey) top    left /calc(60% - 50px) calc(100% - var(--w)),
    linear-gradient(grey,grey) top    left /calc(60% - var(--w)/2 + 1px) 50%,
    
    
    linear-gradient(to right, yellow, purple, blue, green, red, orange);
  background-repeat:no-repeat;
  border-top:10px solid grey;
  border-bottom:10px solid grey;
}

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

<div class="box" style="--w:6px"></div>

这个有点棘手，但您可以更改每个渐变的颜色以更好地识别每一层。

.box {
  --w:4px;
  height:150px;
  position:relative;
  z-index:0;
  background:
    radial-gradient(farthest-side at bottom right,pink calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,red) top 0 right calc(40% - 0.6*56px + var(--w)/2)/54px 50%,
    radial-gradient(farthest-side at top left,yellow calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,orange)  bottom 0 left calc(60% - 0.4*56px + var(--w)/2)/54px 50%,
    
    
    linear-gradient(green,green) bottom right/calc(40% - 50px)  calc(100% - var(--w)),
    linear-gradient(purple,purple) bottom right/calc(40% - var(--w)/2 + 1px) 50%,
    linear-gradient(blue,blue) top    left /calc(60% - 50px) calc(100% - var(--w)),
    linear-gradient(black,black) top    left /calc(60% - var(--w)/2 + 1px) 50%,
    
    
    /*linear-gradient(to right, yellow, purple, blue, green, red, orange)*/
    white;
  background-repeat:no-repeat;
  border-top:10px solid grey;
  border-bottom:10px solid grey;
}

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

<div class="box" style="--w:6px"></div>

获取有关不同值的更多详细信息的相关问题：Using percentage values with background-position on a linear-gradient

另一个想法（基于第一个代码）有渐变但仍然没有透明度：

.box {
  height:150px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */
  --r:90px; /* The curve radius */
  --c:to right, yellow, purple, blue, green, red, orange;  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l));
  border-style:solid;
  border-color:transparent;
  background:
    linear-gradient(pink,pink) padding-box, /* The same as the main background only on the padding-box*/
    linear-gradient(var(--c)) border-box;   /* Main coloration will cover the border-box */
}
.box:before {
   bottom:0;
   left:0;
   width:40%;
   border-width:0 var(--l) var(--l) 0;
   border-radius:0 0 var(--r) 0;
   background-size:calc(100/40 * 100%) 200%; /* 100/X where X is the width*/
   background-position:left bottom;
}
.box:after {
   top:0;
   right:calc(-1 * var(--l));
   width:60%;
   border-width:var(--l) 0 0 var(--l);
   border-radius:var(--r) 0 0 0;
   background-size:calc(100/60 * 100%) 200%; /* 100/X where X is the width*/
   background-position:right top;
}

body {
 background:pink;
}

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

<div class="box" style="--r:40px;--l:10px;--c:to bottom,red,yellow,green">
</div>

<div class="box" style="--r:100px;--l:2px;--c:45deg,purple,#000,orange">
</div>

我们在上面添加mask 以获得透明度：

.box {
  height:150px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */
  --r:90px; /* The curve radius */
  --c:linear-gradient(to right, yellow, purple, blue, green, red, orange);  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l));
  border-style:solid;
  border-color:transparent;
  background: var(--c) border-box; 
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}
.box:before {
   bottom:0;
   left:0;
   width:40%;
   border-width:0 var(--l) var(--l) 0;
   border-radius:0 0 var(--r) 0;
   background-size:calc(100/40 * 100%) 200%; /* 100/X where X is the width*/
   background-position:left bottom;
}
.box:after {
   top:0;
   right:calc(-1 * var(--l));
   width:60%;
   border-width:var(--l) 0 0 var(--l);
   border-radius:var(--r) 0 0 0;
   background-size:calc(100/60 * 100%) 200%; /* 100/X where X is the width*/
   background-position:right top;
}

body {
 background:pink;
}

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

<div class="box" style="--r:40px;--l:10px;--c:linear-gradient(to bottom,red,yellow,green)">
</div>

<div class="box" style="--r:100px;--l:2px;--c:linear-gradient(45deg,purple,#000,orange)">
</div>

【讨论】：