如何使用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; 
} 

反正罗伊，记住，在计算器你可以问的东西，但你也必须与实践给你的答案。这是你真正能学到东西的唯一方法。