3

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

现在这一切都很好，直到您处理右边距和倾斜。每个平行四边形的右上角需要坐在同一个地方并向下倾斜相同的角度才能使这个技巧起作用。不幸的是，因为右边距是从平行四边形的中心（不是顶部）到右边缘的距离，所以这很难——这个度量的固定距离或相对距离都不起作用。关键问题是右边距需要是屏幕垂直高度的函数——这可以通过 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>

如果您可以让两个平行四边形保持对齐，并且无论大小如何仍然垂直填充屏幕（不要担心水平调整大小，我会把它挂在页面的右侧 - 这已经足够了我想要的效果），那么你就是英雄。

我个人认为三种可能性：

  1. 使用正确的边距右、宽度、高度和倾斜组合的一些惊人的方法
  2. 将每个平行四边形放入某个容器中，并告诉它它必须完全留在容器内。
  3. 拼图 - 制作水平条，然后在每个尺寸上与白色平行四边形重叠以创建所需的形状。我已经设法让它工作，但我热衷于制作一个更简单的解决方案 - 如果你真的希望平行四边形坐在某物前面，这种技术很烦人。
4

1 回答 1

2

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

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

或者，如果您不想相对定位嵌套的平行四边形，您完全可以这样做，但这需要您指定每个平行四边形的高度；并为其中的每个锚元素指定一个 margin-top。我认为这个解决方案做得很好。

于 2013-04-28T20:57:24.890 回答