CODEWITHSUNDEEP
csstransformskew
LookingForAnswers
LookingForAnswers

Reputation: 61

CSS3 skew all corners

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

enter image description here

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?

Upvotes: 4

Views: 816

Answers (2)

vals
vals

Reputation: 64164

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

Upvotes: 2

Zach Saucier
Zach Saucier

Reputation: 25954

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.

Upvotes: 2

Related Questions