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歪斜各個角落

回答

相關問題