如何使用 CSS 创建可悬停的彩虹？

Question

我想像这样创建一个彩虹视图堆栈：

我知道边框半径属性，但我还需要悬停、更改宽度和放样这些元素。

我看到使用 clip-path 属性解决了这个问题：

.item {
  height: 760px;
  width: 65px;
  background-color: aqua;
  transition: 0.3s ease-in-out;
  clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

它看起来像这样：

但是那些元素是直的，我怎么能弯曲它们呢？

---

已编辑：

---

这是我需要的最终结果：

Answer 1

您可以尝试如下所示的多个径向渐变。诀窍是在保持相同颜色定义的同时增加每个半径

.box {
  width:100px;
  height:300px;
  background:
    radial-gradient(50%  130% at right center,blue   40%,transparent 42%),
    radial-gradient(70%  150% at right center,red    40%,transparent 42%),
    radial-gradient(90%  170% at right center,green  40%,transparent 42%),
    radial-gradient(110% 190% at right center,purple 40%,transparent 42%),
    pink;
}

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

您可以考虑使用 hsl 着色以获得更好的处理：

.box {
  --c: 230,80%;
  width:100px;
  height:300px;
  display:inline-block;
  background:
    radial-gradient(50%  130% at right center,hsl(var(--c), 20%) 40%,transparent 42%),
    radial-gradient(70%  150% at right center,hsl(var(--c), 40%) 40%,transparent 42%),
    radial-gradient(90%  170% at right center,hsl(var(--c), 60%) 40%,transparent 42%),
    radial-gradient(110% 190% at right center,hsl(var(--c), 80%) 40%,transparent 42%),
    hsl(var(--c), 90%);
}

<div class="box"></div>
<div class="box" style="--c: 120,40%"></div>

有关计算的更多详细信息：How to animate radial-gradient using CSS?

如果你想要不同的元素，你可以尝试像下面这样的剪辑路径：

.box {
  width: 100px;
  height: 300px;
  display: inline-block;
  background: pink;
  position: relative;
  overflow:hidden;
}

.box>* {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition:0.5s all;
}
.box>*:hover {
  left:-50px;
}

<div class="box">
  <span style="clip-path:ellipse(85% 105% at 100% 50%);background:purple;"></span>
  <span style="clip-path:ellipse(70%  90% at 100% 50%);background:green;"></span>
  <span style="clip-path:ellipse(55%  75% at 100% 50%);background:blue;"></span>
  <span style="clip-path:ellipse(40%  60% at 100% 50%);background:red;"></span>
</div>