與css的平行四邊形

-3

我想獲得與Locnville網站上的背景相同的效果：http://locnville.com（傾斜的正方形或平行四邊形，無論如何）。我可以用css獲得平行四邊形，因爲有數千個示例但我無法獲取同樣的效果。誰能幫我這個？與css的平行四邊形

我的CSS：

#parallelogram { 
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(20deg); 
     -moz-transform: skew(20deg); 
     -o-transform: skew(20deg); 
    background: red; 
}

來源

2014-01-29 Frederik Moller

到目前爲止你有什麼？ –

請顯示您之前的操作嘗試。您可以發佈一些您迄今嘗試過的代碼，或者鏈接到您找到的某些網站。在問你這個問題之前，試着做一些研究。 – Joeytje50

檢查我的編輯。 ...... –

我假設你正在尋找的是從左上角到右下角（或反之亦然）的傾斜角度，所以頂邊是在一個角度？

~~您需要旋轉你的箱子，並在這樣的高度和寬度值基本上交換記得......~~

如果你需要你的內容是不被扭曲......

#parallelogram { 
    width: 200px; 
    position: relative; 
    padding: 1em; 
    margin-top: 1em; 

} 

#parallelogram:before { 
    content: ""; 
    -webkit-transform: translateY(-50%) skew(0,5deg); 
    -moz-transform: translateY(-50%) skew(0,5deg); 
     -o-transform: translateY(-50%) skew(0,5deg); 
    background-color:red; 
    position:absolute; 
    top:100%; 
    bottom:-200%; 
    left:0; 
    right:0; 
    z-index: -1; 
}

玩填充和定位會給你想要的形狀（以及歪斜），並考慮到蒂姆在評論中的建議。

來源

2014-01-29 21:30:48 niaccurshi

轉動是沒有必要的。在這個問題的評論中看到我的小提琴。 –

堅持下來作爲答案;） – niaccurshi

隨意竊取我的任何意見，爲您的寫作。我只是處於瀏覽心情。現在太累了才能爲真實做出貢獻。 –

你需要讓兩個獨立的div，用第二個div元素的頂部填充，以及與無重複和頂部位置屬性背景圖像指向您的傾斜方形圖像（應該匹配第一個div背景顏色）。相當簡單的CSS，儘管我會更進一步並使用a：before或：after和no image。

來源

2014-01-29 21:16:52 httpgio

與css的平行四邊形

回答

相關問題