CSS3歪斜各个角落

我试图歪曲我的菜单项是这样的：CSS3歪斜各个角落

enter image description here

我已经找到了几个解决方案，将让我歪斜的所有4个角落，但他们使用的无边框，顶部解决方案，因为渐变，我需要使用背景图像解决方案。

有谁知道如何做到这一点？

来源

2014-12-01 LookingForAnswers

我认为你需要解释多一点你的意思是一个单独的梯度构建它... ...你试图歪曲内盒，而保持边界平直？另外，发布一些代码也会有所帮助，所以我们可以看到你已经尝试过了。 – EmmaGamma 2014-12-01 18:07:57

无法自由移动每个角落，但您可以将skew与rotate和transform-origin组合起来以创建许多不同的效果。与您分享的图片类似的内容。

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

来源

2014-12-01 18:03:09

你可以为每个区域

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

来源

2014-12-01 18:11:15 vals

Upvote为总是聪明的答案，但这是纯粹的视觉，我不认为这正是OP正在寻找 – 2014-12-01 18:12:40

@ZachSaucier也许你是对的..我认为浅蓝色是div的一部分，但现在我可以想到它的背景。有些问题真的很混乱。 – vals 2014-12-01 18:16:03

CSS3歪斜各个角落

回答

相关问题