如何创建具有渐变的曲线? [英] How to create a curved line with gradient?

问题描述

我正在尝试在div的中间插入一条曲线，所以我可以实现以下结果:

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>

推荐答案

没有渐变且没有透明度，您可以考虑使用伪元素和 border-radius .每个伪元素都将创建曲线的一半，然后您将它们加入在一起，以创建连续曲线的错觉.

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>

使用渐变但没有透明度时，您可以依靠多种背景色来近似它.想法是在下面放置所需的渐变，然后用其他图层覆盖渐变以仅使曲线可见:

With gradient and without transparency you can rely on mulitple background coloration to approximate it. The idea is to have the gradient you want below and you cover it with other layers to keep only the curve visible:

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

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

This one is a bit tricky but you can change the coloration of each gradient to better identify each layer.

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

相关问题以获取有关不同值的更多详细信息:将百分比值与线性梯度的背景位置一起使用

Related question to get more details about the different values: Using percentage values with background-position on a linear-gradient

另一个想法(基于第一个代码)具有渐变但仍然没有透明度:

Another idea (based on the first code) to have gradient but still without transparency:

.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 以获得透明度:

And we add mask to be above to get transparency:

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

这篇关于如何创建具有渐变的曲线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！