3

我试图像这样倾斜我的菜单项：

在此处输入图像描述

我找到了一些解决方案，可以让我倾斜所有 4 个角，但它们使用边框顶部解决方案，而由于渐变，我需要使用背景图像解决方案。

有人知道怎么做这个吗？

4

2 回答 2

3

不可能自由移动每个角落，但您可以结合skew并rotate创建transform-origin许多不同的效果。这是一个类似于您分享的图片的演示。

如果您需要更复杂的东西，最好使用 SVG。

于 2014-12-01T18:03:09.177 回答
1

您可以为每个区域使用单独的渐变来构建它

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

演示

于 2014-12-01T18:11:15.390 回答