我刚刚开始学习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>
如果你能让这两个平行四边形排成一行，并且不管大小，仍然垂直地填充屏幕（不要太在意水平大小的调整，我会把它挂在页面的右侧——这对我想要的效果来说已经足够好了），那么你就是一个英雄。
我个人认为有三种可能性：
用一些很好的方法让它在正确的情况下工作
右边距、宽度、高度和倾斜组合框
把每个平行四边形都放在一个容器里，告诉它必须完全放在容器里。
拼图-制作水平条，然后在每个尺寸上与白色平行四边形重叠以创建所需的形状。我已经设法使这个工作，但我热衷于提出一个更简单的解决方案-如果你真的想让平行四边形坐在某物的前面，这个技术是令人讨厌的。
最佳答案
编辑：
只需将3个平行四边形嵌套在一个父对象中，这将使操作更加简单。
对于您解释的场景，这是一个完整的解决方案：
http://jsbin.com/omoreb/1/edit
或者，如果不想相对定位嵌套的平行四边形，则完全可以这样做，但这将要求您指定其中每个平行四边形的高度；并为其中的每个锚定元素指定页边距顶部。我认为这个解决方案很好。
关于html - 如何在HTML中使两个平行四边形完全重叠并动态调整大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15123912/