如何让两个平行四边形完美重叠，并在HTML中动态调整大小

我刚刚开始接触HTML和CSS，我想创建一个包含平行四边形和动态调整大小的设计。我想要四个平行四边形，每个从顶部开始，然后是25%，50%，75%和100%，并且重叠。结果是看起来像一个平行四边形，但有四个部分(这些部分将带有链接到网站其他部分的a-标签)。

现在这一切都很好，直到你处理右边距和倾斜。每个平行四边形的右上方需要位于相同的位置，并且向下的角度相同，这样才能实现这个技巧。不幸的是，因为右边缘是从平行四边形的中心(而不是顶部)到右边缘的距离，所以很难做到这一点——固定的或相对的距离都不适用。关键的问题是，右边距需要是屏幕垂直高度的一个函数-这可能与JQuery，但我想尝试一个纯HTML或CSS解决方案。

下面是一些基本代码来说明这个问题:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
        html,
        body { 
                height:100%;
                width:100%; }
        div.parallelogram {
                position:absolute;
                top:0;
                right:0;
                -moz-transform:skew(-20deg);
                -o-transform:skew(-20deg);
                -webkit-transform: skew(-20deg); }
        div#parallelogram1 {
                height:100%;
                width:20%;
                background-color:#AAA;
                z-index:10; margin-right:100px; }
        div#parallelogram2 {
                height:50%;
                width:20%;
                background-color:#CCC;
                z-index:20;
                margin-right:55px; }
    </style>
</head>
<body>
<div class="parallelogram" id="parallelogram1"></div>
<div class="parallelogram" id="parallelogram2"></div>
</body>

如果你可以让两个平行四边形保持对齐，并且仍然垂直地填充屏幕，而不管大小(不那么在意水平调整大小，我会让它挂在页面的右侧-这对于我想要的效果已经足够好了)，那么你就是一个英雄。

我个人认为有三种可能性:

让这个工作的一些神奇的方法只是正确的margin-right, width, height and skew combo
将每个平行四边形放入某个容器中，并告诉它必须完全留在容器内。

EDIT:
只需将3个平行四边形嵌套在一个父元素中，这样就容易多了。这是您所解释的场景的完整解决方案:

http://jsbin.com/omoreb/1/edit

或者，如果你不想相对定位嵌套的平行四边形，你完全可以这样做，但这需要你指定每个平行四边形的高度;并为其中的每个锚元素指定一个margin-top。

相关内容

最新更新

热门标签：