Q:

change orientation of diagonal lines in html and css

I have diagonal lines as section dividers as explained in this stackoverflow question. However, i didn't find anywhere how to change the orientation, so that instead of descending from right to left they descend from left to right. Can anyone help? I suppose it is easy but I have tried and haven't been successful so far.
Code:

<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>

Thanks!

A:

     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> 

This code works finely. Just scale .diagonal to minus value and revert that scale value of .content again.
Try this and let me know the updates. Thanks

