Question

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

现在这一切都很好，直到你处理正确的边距和偏斜。每个平行四边形的右上角需要坐在同一个地方并向下移动相同的角度才能使这个技巧发挥作用。不幸的是，因为右边距是从平行四边形（不是顶部）的中心到右边缘的距离，所以这很难 - 这个测量的固定或相对距离都不起作用。关键问题是右边距需要是屏幕垂直高度的函数 - 这可以通过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和skew combo
在每个容器内部放置每个平行四边形，并告诉它必须完全留在容器内。
拼图 - 制作水平条纹，然后在每个尺寸上与白色平行四边形重叠，以创建所需的形状。我已经设法让这个工作，但我渴望做一个更简单的解决方案 - 如果你真的想要平行四边形坐在某事物的前面，这种技术很烦人。

Answer 1

修改
只需将3个平行四边形嵌套在一个父母中，这将使其更容易。这是您解释的场景的完整解决方案：

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

或者，如果你不想相对定位嵌套的平行四边形，你可以绝对地做，但这需要你指定每一个的高度;并为其中的每个锚元素指定一个margin-top。我认为这个解决方案没问题。

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

1 个答案: