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

Question

I want to create a rainbow view stack like so:

I know about border radius property, but I need also hover, width-changing and staking of those elements.

I see the solving of this problem with using clip-path property:

.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%);
}

And it looks like this:

But those elements are straight, how can I bend them?

---

Edited:

---

Here is the final result i need:

Answer 1

You can try multiple radial gradient like below. The trick is to increase the radius of each one while keeping the same color definition

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

You can consider hsl coloration for better handling:

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

Related for more details about the calculation: How to animate radial-gradient using CSS?

If you want different element you can try clip-path like below:

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

Answer 2

give a try to this based on box-shadow property

Rainbow with :hover transition on colors:

 div { position: relative; width: 95vw; height: 45vw; overflow: hidden; background: transparent; transform: translate(-50vw, -16.666vw); top: 8vw; left: 50vw; } div:after { transition: box-shadow 0.3s ease-in-out; position: absolute; content: ''; width: 50%; height: 100%; top: 25vw; left: 25vw; border-radius: 50%; box-shadow: 0 0 0 2vw #4200AB, 0 0 0 4vw #000095, 0 0 0 6vw #00ABFF, 0 0 0 8vw #00C800, 0 0 0 10vw #FFF800, 0 0 0 12vw #FF7642, 0 0 0 14vw #E40000; } div:hover::after { box-shadow: 0 0 0 2vw #35CC00, 0 0 0 4vw #950000, 0 0 0 6vw #FFAB00, 0 0 0 8vw #800C80, 0 0 0 10vw #800FFF, 0 0 0 12vw #642FF7, 0 0 0 14vw #000E40; } body { margin: 0; } 

 <div></div> 

Ref: CSS design - rainbow