Html 如何使用css创建不同形状的梯形图像？

我在一个网站上工作，我需要使用不同的梯形形状的图像。在这里，我给你链接中的图像：

谢谢Riccardo，感谢你的努力

以下是我仍然需要解决的两点

这是我在实现代码后得到的图像

该网站的形状将是倾斜的，但不是图像。目前的形状是完美的，但所有的图像也得到了扭曲的形状，我不想要。我希望所有的图像不要像现在显示的那样倾斜。因此，我们需要在这一特定问题上的指导

第二个最重要的是关于网站的总体结构。我的网站将在100%，但在容器，你已经给了固定的高度和宽度，但我想高度和宽度将是100%

我试过用100%宽度代替当前像素，但都弄糟了。在这里，我张贴我给定的css。形状的左边部分是固定的，当我给widhth 30%时，它不会增加。右边的形状移动到了最右边，在中间和右边的形状之间，显示了容器的背景，根据css代码，它是橙色的。最终我把一切都搞砸了，这是其中的一个环节：

还有一件事我想补充的是，有可能把100%的高度放在那个容器上。因为每当我试图把高度提高到100%时，整个结构就消失了。在那个特定的高度点有什么解决方案吗

---

图像问题和宽度高度100%问题对于网站的正常运行都很重要。因此需要您的指导。

HTML结构供参考：

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

如果设置了overflow:hidden，则容器中的所有元素都将被截断，并且它们不能扩展到父元素之外

之后，我在容器中放置了3个span，它们是内联元素，所以我不能设置它们的宽度或高度。为此，我将其display:property设置为inline block。现在我可以给跨度一个维度

跨度处于绝对位置，因为我希望跨度能够重叠

对于绝对位置之后的位置，请使用z索引

3个跨度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;
}

正如您所看到的，有形状的倾斜变换，还有溢出：隐藏，因为我不希望跨度内的img超出父区域

当我把一个img放在倾斜的跨度内时，它也会考虑形状的倾斜。因此，应用

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

其中，skew特性与应用于跨度的特性正好相反。有了这个，我保持了img的标准形状没有歪斜。尝试在JSFIDLE演示中删除该选项，然后查看

所以我希望我是清楚的。对于一切，请留下评论

第二种解决方案：

宽度100%

CSS->

---

无论如何，罗伊，记住，在stackoverflow中，你可以要求一些东西，但你也必须练习给出的答案。这是你真正学到东西的唯一方法。

不要与该服务共享该文件。通过Stack Overflow的接口将其上传到imgur。@alex至少10次service@RichardTingle我也这么怀疑。不过，RapidShare是一个可怕的共享图像的服务。用户可以随时手动上传到imgur并链接到它，我认为这是允许的。Rapidshare是速度最慢的一个，它会在2个月后删除其文件，因此此链接将变得无用。除此之外，这并不可怕。网站上有很多广告，但大多数广告都是针对自己的。这是原始海报试图发布的JSFIDLE，但我认为堆栈溢出要求它们附带问题本身中的代码：。你想要的解决方案是什么？我刚刚发布了关于此问题的查询。到目前为止，你帮了大忙。所以我希望你的最终指导能帮我解决以下问题。我还提供了一个关于100%宽度问题的JSFIDLE链接。图像会随着形状的变化而倾斜。所以我希望图像不会像形状一样倾斜。这是jsfiddle链接。如果你有时间，请看一看。我的网站将是100%，所以我给了100%的宽度。然后整个事情都搞砸了。因为你必须添加moz过渡带过渡来消除img的倾斜，所以在我们刚刚弄明白之前我没有添加它。现在所有的图像都完美地展现出来了。希望您能给出一些如何以%格式显示整个结构的想法。

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

#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;
}