如何使用css創建不同形狀的梯形圖像？

Question

我正在一個網站上工作，我需要使用不同的梯形形狀的圖像。在這裏我給你鏈接中的圖像：

感謝Riccardo，感謝你的努力。

以下是我仍然需要解決的兩點。

這是我在實現代碼後得到的圖像。

網站的

1. 形狀將被扭曲，但沒有圖像。目前的形狀是完美的，但所有的圖像也隨着我不想要的形狀而偏斜。我希望所有圖像不會像現在顯示的那樣顯示爲偏斜。所以需要關於這個特定問題的指導。

2. 而第二個最重要的是關於網站的總體結構。我的網站將在100％，但在容器中，你已經給出了固定的高度和寬度，但我想要的高度和寬度將是100％。

我試過把100％的寬度，而不是當前的像素，但它都搞砸了。在這裏，我張貼我給定的CSS。形狀的左側部分是固定的，當我給出30％的寬度時，它不會增加。右側的形狀向右移動，在中間和右側形狀之間顯示容器後組，按照css代碼顯示橙色。最後我搞砸了所有的東西，這是這個鏈接：

我還想補充的另一件事是，可以將100％的高度放在該容器上。因爲無論何時我試圖將身高設置爲100％，整個結構都會消失。那麼在特定高度點的任何解決方案？

對於網站來說，圖像問題和寬度高度100％問題都很重要。所以需要你的指導。

Answer 1

HTML結構以供參考：

<div id="container"> 
    <span id="left"> 
     <img src=""/> 
    </span> 
    <span id="middle"> 
     <img src=""/> 
    </span> 
    <span id="right"></span> 
</div> 

我做this例如你用純CSS。

現在讓我解釋我是如何做到的。

我拿一個容器，設置它的尺寸和相對位置。

#container{ 
    width: 600px; 
    background-color: orange; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
} 

如果將容器內的所有overflow: hidden元素將被截斷，他們不能展開父之外。

之後，我把3跨度放在容器中，它們是內聯元素，所以我不能設置它們的width或height。爲此，我將其display:屬性設置爲inline-block。現在我可以給span一個維度。

span位於absolute的位置，因爲我希望跨度能夠重疊。

對於之後的絕對位置使用z-index。

3 span id。

#left { 
    position: absolute; 
    left: -100px; 
    display: inline-block; 
    width: 300px; 
    background-color: red; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 1; 
    overflow: hidden; 
} 
#left img { 
    -webkit-transform: skew(20deg,0deg); 
} 
#middle { 
    position: absolute; 
    left: 200px; 
    display: inline-block; 
    width: 200px; 
    background-color: green; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 3; 
    border-right: 10px solid white; 
    border-left: 10px solid white; 
    overflow: hidden; 
} 
#middle img { 
    -webkit-transform: skew(20deg, 0deg); 
    margin-left: -50px; 
} 
#right { 
    position:absolute; 
    right:-100px; 
    display:inline-block; 
    width:400px; 
    background-color:gray; 
    height:300px; 
    transform:skew(-20deg,0deg); 
    -ms-transform:skew(-20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */ 
    z-index:2; 
    overflow:hidden; 
} 

正如你可以看到有該skew轉型的形狀，也是因爲overflow: hidden我不想跨度內img去父區域之外。

當我把img放在偏斜範圍內時，它也需要形狀的歪斜。因此，應用

#nameofskewedcontainer img { 
    -webkit-transform: skew(20deg, 0deg); 
} 

其中偏斜屬性與應用於跨度的截然相反。與此同時，我保持img與標準的形狀沒有歪斜。 （試圖刪除在jsfiddle演示中看到）

所以我希望我很清楚。對於一切發表評論！

第二UPDATED SOLUTION：

寬度100％

CSS->

#container { 
    width: 100%; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
} 

#left { 
    position: absolute; 
    left: -100px; 
    display: inline-block; 
    width: 50%; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 1; 
    overflow: hidden; 
} 
#left img { 
    transform: skew(20deg, 0deg); 
    -moz-transform: skew(20deg, 0deg); 
    -webkit-transform: skew(20deg, 0deg); 
} 
#middle { 
    position:absolute; 
    left: 30%; 
    display: inline-block; 
    width: 40%; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 3; 
    border-right: 10px solid white; 
    border-left: 10px solid white; 
    overflow: hidden; 
} 
#middle img { 
    transform: skew(20deg, 0deg); 
    -moz-transform: skew(20deg, 0deg); 
    -webkit-transform: skew(20deg, 0deg); 
    margin-left: -50px; 
} 
#right { 
    position: absolute; 
    right: -100px; 
    display: inline-block; 
    width: 50%; 
    background-color: gray; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 2; 
} 

反正羅伊，記住，在計算器你可以問的東西，但你也必須與實踐給你的答案。這是你真正能學到東西的唯一方法。