CSS3 skew all corners

Question

I'm trying to skew my menu items like this:

I've found a few solution that will let me skew all 4 corners but they use a border-top solution whilst I need to use a background-image solution because of the gradient.

Does anybody know how to do this?

Answer 1

It's not possible to move each corner around freely, but you can combine skew with rotate and transform-origin to create a lot of different effects. Here's a demo of something similar to the picture you shared.

If you need something more intricate, it'd likely be best to use SVG.

Answer 2

You can build it with a separate gradient for each zone

div {
    width: 400px;
    height: 200px;
    background-image: linear-gradient(6deg, blue 19%, transparent 10%),
        linear-gradient(80deg, green 12%, transparent 10%),
        linear-gradient(175deg, red 18%, transparent 10%),
        linear-gradient(275deg, yellow 18%, transparent 10%),
        linear-gradient(6deg, lightblue 21%, transparent 10%),
        linear-gradient(80deg, lightgreen 13%, transparent 10%),
        linear-gradient(175deg, lightcoral 21%, transparent 10%),
        linear-gradient(275deg, lightyellow 19%, transparent 10%);
}

demo