CSS color sections dived diagonally - css

Question

Is it possible to accomplish a diagonal line stroke, with a bit of an off-set in any side. I've seen a variation of this accomplished with css linear-gradient, but I need something slightly different. I don't know how to describe what I need exactly in words. I'll use pictures.
I've tried playing with gradients:
.diagonal{
background-color: #34ADFF;
background-image: linear-gradient(to right top, whitesmoke 50%, #34ADFF 50%);
height: 300px;
}
<div class="diagonal">
</div>
That's how far I've gone. I'm thinking of playing around with child divs, but I'm not sure yet.
Any ideas ?
I don't want to use images, I want to use just CSS.

Answer 1

You could try using a separate div for the linear-gradient
.diagonal-top {
background-image: linear-gradient(to left top, whitesmoke 50%, #34ADFF 50%);
height: 20px;
}
.diagonal-bottom {
background-image: linear-gradient(to right top, #34ADFF 50%, whitesmoke 50%);
height: 40px;
}
.header {
height: 30px;
background-color: #34ADFF;
}
.footer {
height: 50px;
background-color: #34ADFF;
}
.clearfix {
height: 30px;
background-color: whitesmoke;
}
<div class="header"></div>
<div class="diagonal-top"></div>
<div class="clearfix"></div>
<div class="diagonal-bottom"></div>
<div class="footer"></div>

Answer 2

Ok so here's the thing. This must stay responsive and able to evolve over time so I searched for a better solution and here's what I found. To simplify it a little bit, here's a snippet :
.se-container {
display: block;
width: 100%;
overflow: hidden;
padding-top: 100px;
}
.se-slope {
margin: 0 -50px;
transform-origin: left center;
}
.se-slope:nth-child(odd) {
background: url(http://lorempixel.com/400/200/);
background-size: cover;
transform: rotate(5deg);
margin-top: -200px;
box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.4);
}
.se-slope:nth-child(even) {
background: linear-gradient(to right, purple 0%, red 100%);
transform: rotate(-5deg);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4) inset;
}
.se-content {
margin: 0 auto;
}
.se-content p {
width: 75%;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
line-height: 24px;
}
.se-slope:nth-child(odd) .se-content {
transform: rotate(-5deg);
padding: 130px 100px 250px 100px;
}
.se-slope:nth-child(even) .se-content {
transform: rotate(5deg);
padding: 150px 100px 250px 100px;
}
<section class="se-container">
<div class="se-slope">
<article class="se-content">
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</article>
</div>
</section>

Answer 3

I am able to get the desired result using the following linear gradient:
linear-gradient( 6deg, transparent 73%, rgba(50, 87, 106, 0.72) 27%);
You can control the shape very easily.
the first parameter or linear-gradient( 6deg... controls the degree of the skew - You can use negative values as well
The percentages after each of the colors control the location of the dividing line.
If the numbers don't add up to 100% the divider will be blurry.
I added an image background and background-blend-mode:overlay; in the example below for demo purposes.
body {
text-align: center;
}
.test {
height: 400px;
width: 500px;
margin: 0 auto;
display: inline-block;
background: url(https://unsplash.it/500/400), linear-gradient( 6deg, transparent 73%, rgba(50, 87, 106, 0.72) 27%);
background-blend-mode:overlay;
}
<div class="test"></div>

Answer 4

An extremely unsophisticated demo using transform: rotate()
The rotateZ() CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
The working content of your slanted containers would require careful placement, and there are some potential positioning issues, but with effort, I think this could work.
body {
background: lightgray;
margin: 0;
height: 300vh;
}
header, footer {
position: fixed;
height: 20vh;
width: 120vw;
left: -10vw;
overflow: hidden;
}
header {
background: lightblue;
top: -6vh;
}
footer {
background: lightgreen;
bottom: -6vh;
}
footer,
header p {
transform: rotateZ( -3deg );
}
header,
footer p {
transform: rotateZ( 3deg );
}
<header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</footer>