如何创建以线性渐变为背景的曲面仪表？

Question

我想用纯 css 制作一个 0-100% 响应的仪表，颜色从绿色到红色渐变。我找到了一些例子，但无法在其中任何一个中获得正确的渐变效果。经过一些测试后，我设法让它有点工作。它基本上是一个具有线性渐变背景的背景 div 和一个具有半透明边框的白色前景 div，使用 border-radius 使它们变圆。当我旋转前景 div 时，它会显示或遮盖部分渐变背景 div。

但我有这个视觉故障，我不知道如何解决：

前景的白色边框 div 没有完全遮挡渐变 div。

这是我的测试代码（它可能包含我之前所做的所有测试中不必要的 css 规则）：

https://jsfiddle.net/fLtzrg3w/

HTML:

  <div class="c">
    <div class="go">
      <div class="g"></div>
      <div class="gbg"></div>
    </div>
  </div>

CSS:

.c{
  position: relative;
  float:left;
  text-align: center;
  width: 50%;
  padding: 25% 5px 0 5px;
  height: 1rem;
  overflow:hidden;
}

.go{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top:100%;
  margin-top: -50%;
}

.g{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  border: 40px solid transparent;
  border-bottom-color: #fff;
  border-right-color: #fff;
  transform: rotate(20deg);
  background: white;
  background-clip: padding-box;
  z-index: 2;
}

.gbg{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background: linear-gradient(to right, green 0%, yellow 50%, red 100%);
  z-index: 1;
}

如何让白色div完全覆盖背景渐变div？

Answer 1

我会使用多个背景以不同的方式执行此操作：

.box {
  width:250px;
  border-radius:500px 500px 0 0;
  background:
     /* a linear gradient to control the progress. Adjust the angle from 0deg to 180deg*/
     linear-gradient(160deg,transparent 50%,#fff 0) top/100% 200%,
     /* a radial gradient to show only a part of the gradient (20px here)*/
     radial-gradient(farthest-side at bottom,#fff calc(100% - 20px),transparent 0),
     /* the main gradient */
     linear-gradient(to right, green , yellow , red);
}
.box::before {
  content:"";
  display:block;
  padding-top:50%;
}

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

您可以使用 CSS 个变量进行优化：

.box {
  --p:160deg;
  --b:20px;
  
  width:250px;
  display:inline-block;
  border-radius:500px 500px 0 0;
  background:
     /* a linear gradient to control the progress. Adjust the angle from 0deg to 180deg*/
     linear-gradient(var(--p),transparent 50%,#fff 0) top/100% 200%,
     /* a radial gradient to show only a part of the gradient (20px here)*/
     radial-gradient(farthest-side at bottom,#fff calc(100% - var(--b) - 1px),transparent calc(100% - var(--b))),
     /* the main gradient */
     linear-gradient(to right, green , yellow , red);
}
.box::before {
  content:"";
  display:block;
  padding-top:50%;
}

<div class="box"></div>
<div class="box" style="--b:30px;--p:90deg"></div>
<div class="box" style="--b:10px;--p:40deg"></div>

另一种语法：

.box {
  --p:160deg;
  --b:20px;
  
  width:250px;
  display:inline-block;
  border-radius:500px 500px 0 0;
  padding:var(--b) var(--b) 0;
  background:
     linear-gradient(var(--p),transparent 50%,#fff 0) top/100% 200%,
     linear-gradient(#fff,#fff) content-box,
     linear-gradient(to right, green , yellow , red);
}
.box::before {
  content:"";
  display:block;
  padding-top:50%;
}

<div class="box"></div>
<div class="box" style="--b:30px;--p:90deg"></div>
<div class="box" style="--b:10px;--p:40deg"></div>

并使用蒙版实现透明度：

.box {
  --p:160deg;
  --b:20px;
  
  width:250px;
  display:inline-block;
  border-radius:500px 500px 0 0;
  background: linear-gradient(to right, green , yellow , red);
  -webkit-mask:
     radial-gradient(farthest-side at bottom,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b))),
     linear-gradient(var(--p),#fff 50%,transparent 0) top/100% 200%;
  -webkit-mask-composite:destination-in;
          mask-composite:intersect;
}
.box::before {
  content:"";
  display:block;
  padding-top:50%;
}

body {
  background:#f3f3f3;
}

<div class="box"></div>
<div class="box" style="--b:30px;--p:90deg"></div>
<div class="box" style="--b:10px;--p:40deg"></div>

如何创建以线性渐变为背景的曲面仪表？

How to create a curved gauge having linear-gradient as background?

html

css

border

linear-gradients