CSS3 перекосить все углы

Question

Я пытаюсь исказить мои пункты меню, как это:

Я нашел несколько решений, которые позволят мне наклонить все 4 угла, но они используют решение с верхом границы, в то время как мне нужно использовать решение с фоновым изображением из-за градиента.

Кто-нибудь знает, как это сделать?

Answer 1

Невозможно свободно перемещать каждый угол, но вы можете комбинировать skew с rotate а также transform-origin создать много разных эффектов. Вот демонстрация чего-то похожего на картинку, которой вы поделились.

Если вам нужно что-то более сложное, лучше всего использовать SVG.

Answer 2

Вы можете построить его с отдельным градиентом для каждой зоны

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

демонстрация