我刚刚开始接触 HTML 和 CSS，我想创建一个涉及平行四边形并动态调整大小的设计。我想要四个平行四边形，每个平行四边形都从顶部开始，然后分别为 25%、50%、75% 和 100%，并且相互重叠。结果看起来像一个平行四边形，但有四个部分(这些部分将带有 a 标签以链接到网站的其他部分)。
现在这一切都很好，直到您处理右边距和倾斜。每个平行四边形的右上角都需要位于同一个位置并向下倾斜相同的 Angular 才能使这个技巧起作用。不幸的是，因为右边距是从平行四边形的中心(不是顶部)到右边缘的距离，所以这很难 - 对于此度量，固定距离或相对距离都不起作用。关键问题是右边距需要是屏幕垂直高度的函数——这可以通过 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，宽度，高度和倾斜组合
- 将每个平行四边形放入某个容器内，并告诉它它必须完全留在容器内。
- 拼图 - 制作水平条，然后在每个尺寸上与白色平行四边形重叠以创建所需的形状。我已经设法让它发挥作用，但我很想做一个更简单的解决方案 - 如果你真的想让平行四边形位于某物的前面，这种技术会很烦人。
最佳答案
编辑:
只需将 3 个平行四边形嵌套在一个母体中，这样会容易得多。
这是您解释的场景的完整解决方案:
http://jsbin.com/omoreb/1/edit
或者，如果您不想相对放置嵌套的平行四边形，您可以绝对这样做，但这需要您指定每个平行四边形的高度；并为其中的每个 anchor 元素指定一个 margin-top 。我认为这个解决方案很好。
关于html - 如何让两个平行四边形完美重叠并在 HTML 中动态调整大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15123912/