How to create hoverable rainbow with 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:

It's maybe a bit heavy for your app but consider using `d3.js` library which is very useful and makes it easy to create beautiful viz and effects. — Flo, Aug 05 '19 at 08:27
you could try using a [linear gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) for your background colour instead of clipping. If it needs to be curved, then you may need a [radial gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient) instead — Pete, Aug 05 '19 at 08:33
how you want them to behave on hover? you want them seperate elements? — Temani Afif, Aug 05 '19 at 08:48
How is your picture a rainbow? Is this designer jargon? Your image looks like a gradient to me. — Matt Ellen, Aug 05 '19 at 09:04
@TemaniAfif I want to increase width on hover and catch click on each part — vboyko, Aug 05 '19 at 10:04
@MattEllen gradient is about color. Color doesn't matter for me, I need this stack layout and events handling. Rainbow is the most specific form to explain — vboyko, Aug 05 '19 at 10:12
@vboyko rainbow is about colour. gradient is about shades. When you say rainbow I think of the visible light spectrum in an arch. Are you looking for an arch shape? A stack of arches? — Matt Ellen, Aug 05 '19 at 10:18

Temani Afif · Accepted Answer · 2019-08-05T10:12:46.270

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>

I need to catch hover and click events on the parts of the gradient — vboyko, Aug 05 '19 at 10:02
@vboyko you need to consider this information into your question, that's why I was asking if you want sepearte element and how you need the hover effect. You didn't reply ... — Temani Afif, Aug 05 '19 at 10:03
I like you solution, but when I say stack it mean arches are related, so when I hover one and increase width, other must move left not overlap each other — vboyko, Aug 05 '19 at 10:32
@vboyko you can easily to do what you want: https://jsfiddle.net/qz1dfs3y/1/ since you didn't specify what kind of hovering I simply made random one to demontrate the code. — Temani Afif, Aug 05 '19 at 10:36

How to create hoverable rainbow with CSS?

1 Answers1