试图创建带有渐变的纯CSS仪表的边框故障

问题描述

我想用纯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？

解决方法

我会使用多个背景来做到这一点：

.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),#fff calc(100% - var(--b) - 1px),transparent calc(100% - var(--b))),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),linear-gradient(#fff,#fff) content-box,linear-gradient(to right,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,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>