Question

我有对角线作为区域分隔线，如this stackoverflow question中所述。但是，我在任何地方都找不到如何更改方向的方法，因此它们不是从右到左下降，而是从左到右下降。有人可以帮忙吗？我想这很容易，但是我已经尝试过并且到目前为止还没有成功。

代码：

<style type="text/css">
  body {
    
    margin: 0px;
}
p {
    color: white;
}
section {
    position: relative;
    background: blue;
    color: #fff;
    text-align: center;
}
section:before {
    position: absolute;
    content:'';
}
section.diagonal {
    background: blue;
}
footer {
    position: relative;
    background: black;
    color: #fff;
    text-align: center;
}
footer:before {
    position: absolute;
    content:'';
}
footer.diagonal {
    background: black;
}
.diagonal {
    z-index: 1;
    padding: 3em;
}
.diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
}
</style>

<section style="background-color:gray;">
    <p>section</p>
</section>
<section class="diagonal">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</section>
<section class="diagonal" style="background-color:black;">
  <img src="#">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</section>
<footer class="diagonal" style="background-color:gray;">
    <p>Footer</p>    
</footer>

谢谢！

Answer 1

改变旋转角度，只是位置上的微小变化

<style type="text/css">
  body {
    
    margin: 0px;
}
p {
    color: white;
}
section {
    position: relative;
    //background: blue;
    color: #fff;
    text-align: center;
}
section:before {
    position: absolute;
    content:'';
}
section.diagonal {
    background: blue;
}
footer {
    position: relative;
    //background: black;
    color: #fff;
    text-align: center;
}
footer:before {
    position: absolute;
    content:'';
}
footer.diagonal {
    //background: black;
}
.diagonal {
    z-index: 1;
    padding: 3em;
}
.diagonal:before {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
    top: -20px;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
    outline:1px solid red;
}
</style>

<section style="background-color:gray;">
    <p>section</p>
</section>
<section class="diagonal">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</section>
<section class="diagonal" style="background-color:black;">
  <img src="#">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</section>
<footer class="diagonal" style="background-color:gray;">
    <p>Footer</p>    
</footer>

Answer 2

     body {
        
        margin: 0px;
    }
    p {
        color: white;
        margin-top: 5px;
    }
    section {
        position: relative;
        background: blue;
        color: #fff;
        text-align: center;
    }
    .diagonal {
       text-align: center;
        -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    }
    .content {
          -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    }
    section:before {
        position: absolute;
        content:'';
    }
    section.diagonal {
        background: blue;
    }
    footer {
        position: relative;
        background: black;
        color: #fff;
        text-align: center;
    }
    footer:before {
        position: absolute;
        content:'';
    }
    footer.diagonal {
        background: black;
    }
    .diagonal {
        z-index: 1;
        padding: 3em;
    }
    .diagonal:before {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-transform-origin: -3% 0;
        transform-origin: -3% 0;
        top: 0;
        left: -25%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
    }

    <section style="background-color:gray; padding: 5px 5px 15px;">
        <p>section</p>
    </section>
    <section class="diagonal">
      <div class="content">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </section>
    <section class="diagonal" style="background-color:black;">
    <div class="content">
        <img src="#">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </section>
    <footer class="diagonal" style="background-color:gray;">
    <div class="content">
        <p>Footer</p> 
      </div>   
    </footer>

此代码可以正常工作。只需将.diagonal缩放到负值，然后再次还原.content的缩放值即可。

尝试一下，让我知道更新。谢谢

更改HTML和CSS中对角线的方向

2 个答案: