CSS color segments diagonally

Question

Is it possible to make a diagonal line stroke, with a slight deviation in either direction. I saw a variation of this with a linear css gradient, but I need something a little different. I do not know how to correctly describe what I need. I will use photos.

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

How far have I gone I’m thinking about playing with children's sofas, but I’m not sure yet.

Any ideas?

I do not want to use images, I want to use only CSS.

Answer 1

I can get the desired result using the following linear gradient :

 linear-gradient( 6deg, transparent 73%, rgba(50, 87, 106, 0.72) 27%); 

You can easily control the form.

first parameter or linear-gradient( 6deg... controls the degree of skew . You can also use negative values

percentages after each of the colors controls the location of the dividing line.

If the numbers do not match 100% , the separator will be blurred.

I added an image background-blend-mode:overlay; and background-blend-mode:overlay; in the example below for demonstration 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 2

Extremely unsophisticated demo using transform: rotate()

The CSS function rotateZ() defines a transformation that moves an element around the z axis without warping it. The momentum is determined by a given angle; if positive, the movement will be clockwise; if it is negative, it will be counterclockwise.

The working contents of your tilted containers will require careful placement, and there are some potential problems with positioning, but with difficulty I think this might 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> 

Answer 3

You can try using a separate div for 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 4

Ok, here. It should remain responsive and able to evolve over time, so I was looking for the best solution, and here is what I found. To simplify it a bit, here is 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>