-2

我正在一个需要使用不同梯形图像的网站上工作。在这里，我在链接中为您提供该图像：

谢谢里卡多，感谢你的努力。

以下是我仍然需要整理的两点。

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

在此处输入图像描述

  1. 网站的形状会倾斜，但图像不会。当前的形状是完美的，但所有图像也与我不想要的形状一起倾斜。我希望所有图像都不会像现在显示的那样倾斜。所以需要关于那个特定问题的指导。

  2. 第二个最重要的事情是关于网站的整体结构。我的网站将在 100% 中，但在 Container 中，您已经给定了固定的高度和宽度，但我希望高度和宽度为 100%。

我尝试过放置 100% 宽度而不是当前像素，但一切都搞砸了。在这里，我发布了我给定的 css。形状的左边部分是固定的，当我给宽度 30% 时它不会增加。并且右侧形状正在向右移动，并且在中间和右侧形状之间，容器背景组显示为橙色，根据 css 代码。最终我把所有事情都搞砸了，这是这个链接：

我想补充的另一件事是，是否可以在该容器上放置 100% 的高度。因为每当我尝试将高度设置为 100% 时，整个结构都会消失。那么在那个特定的高度点有什么解决方案吗？

图像问题和宽度高度 100% 问题对于网站的运行都很重要。所以需要你的指导。

4

1 回答 1

0

供参考的 HTML 结构：

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

我用纯 CSS 为你做了这个例子。

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

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

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

如果您设置overflow: hidden容器内的所有元素将被截断并且它们不能扩展到父级之外。

之后我在容器中放了 3 个跨度，它们是内联元素，所以我不能设置它们的widthor height。为此，我将它们的display:属性设置为inline-block. 现在我可以给spana维度了。

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跨度内部超出父区域。

当我img在倾斜的跨度内放置一个时，它也会产生形状的倾斜。所以应用

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

其中 skew 属性与应用于跨度的属性完全相反。这样我就可以保持标准形状的 img 没有歪斜。（尝试在 jsfiddle 演示中删除它并查看）

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

第二个更新的解决方案：

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

无论如何，罗伊，请记住，在 stackoverflow 中你可以提出一些问题，但你也必须练习给你的答案。只有这样，你才能真正学到一些东西。

于 2013-07-13T10:57:47.403 回答