logo标签列表

CSS3倾斜所有角落

csstransformskew
3

我想像这样倾斜我的菜单项：

enter image description here

我找到了一些解决方案，可以让我倾斜所有 4 个角，但它们使用的是 border-top 解决方案，而我需要使用背景图像解决方案，因为有渐变。

有人知道怎么做吗？

2
我认为你需要更详细地解释一下你的意思...你是想在保持边框直的情况下扭曲内部框吗？此外，发布一些代码也会很有帮助，这样我们就可以看到你尝试过什么。 - heckascript
2个回答
3
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%);
}

演示

点赞这个总是聪明的答案，但这纯粹是视觉效果，我认为这不完全是OP所寻找的。 - Zach Saucier
@ZachSaucier 也许你是对的。我原以为浅蓝色是 div 的一部分，但现在想想它可能只是背景。有些问题确实很令人困惑。 - vals
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接