CSS3歪斜了所有角落

Question

我试图扭曲我的菜单项：

我找到了一些解决方案，让我可以歪斜所有​​4个角落，但他们使用的是边框解决方案，而我需要使用背景图像解决方案，因为渐变。

有人知道怎么做吗？

Answer 1

无法自由移动每个角落，但您可以将skew与rotate和transform-origin结合使用，以创建许多不同的效果。 Here's a demo类似于您分享的图片。

如果您需要更复杂的东西，最好使用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%);
}

demo