Question

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

感谢Riccardo，感谢您的努力。

以下是我还需要解决的两点。

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

enter image description here

网站的形状将会歪斜但不会影响图像。目前的形状是完美的，但所有的图像也随着我不想要的形状而倾斜。我希望所有的图像都不会像现在一样显示出来。因此需要就该特定问题提供指导。
第二个最重要的是关于网站的总体结构。我的网站将是100％，但在容器中，你给出了固定的高度和宽度，但我希望高度和宽度将是100％。

我尝试过100％宽度而不是当前像素，但它们都搞砸了。在这里，我发布我的给定的CSS。形状的左侧部分是固定的，它没有增加，而我给的是30％的widhth。并且右侧形状向右移动并且在中间和右侧形状之间显示容器背景组，其根据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>

我用纯css为你做了this示例。

现在让我解释一下我是如何做到的。

我拿一个容器，设置它的尺寸和相对位置。

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

如果设置overflow: hidden，容器内的所有元素都将被截断，并且它们无法在父级之外扩展。

之后我在容器中放了3个span，它们是内联元素，因此我无法设置width或height。为此，我将display:属性设置为inline-block。现在我可以给span一个维度。

span位于absolute位置，因为我希望跨度能够重叠。

在绝对位置之后使用z-index。

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

正如您所看到的那样，形状的skew转换以及overflow: hidden因为我不希望范围内的img超出父区域。< / p>

当我在倾斜的跨度内放置img时，它也会受到形状的偏斜。所以应用

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

其中skew属性与应用于span的方向完全相反。有了它，我保持img标准形状没有歪斜。（尝试在jsfiddle演示中删除它并查看）

所以我希望我很清楚。对于一切发表评论！

SECOND UPDATED解决方案：

宽100％

CSS-＆GT;

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

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

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

1 个答案: