linear-gradient on 2-pieced background

Question

I'm making a client's website that has the following design in it:

As you can see, the 3 block have a variable content size, but the top is the same. It also has a subtle gradient that runs over the whole shape.

To accomplish the design, I made a parent div, with 2 child divs: .background & .content, which overlap each other (position + z-index).

Inside .background, I have 2 div's: .triangle & .block.
Since .triangle has a fixed height (220px), the gradient for .block can start at -220px: linear-gradient(yellow -220px, green 100%).
But the problem is that my .block div has a variable height, so I don't know where to end the .triangle's gradient.

Also if I use a border-image on .triangle, my triangle shape gets lost. I'd like to do it in CSS only if that's possible.

I've put a little JSFiddle together to make my problem more clear: https://jsfiddle.net/c1pgeq7j

Answer 1

Thanks to Adam Wathan for giving me the answer I was looking for: https://jsfiddle.net/c1pgeq7j/10

He ended up with no child-divs in .background and applying the following CSS to it:

background-image: linear-gradient(#176EFD, #1152B7);
clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 220px);

Only need to add the -webkit-variant of clip-path, so it's also supported in the newest version of Safari.

Thanks for trying to help me out people!

Answer 2

Try this one

HTML

<div class="container">
  <div class="main">
    <div class="main-container">
      <section>
       <h1>Content</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et est urna. Pellentesque hendrerit lobortis tincidunt. Sed et malesuada ante. Donec sit amet molestie libero. Nam sed gravida nunc. Ut porttitor rhoncus volutpat. Quisque eu sollicitudin quam. Quisque tempor justo eget sodales maximus.

Ut pharetra nulla sit amet augue vulputate pharetra. Nulla facilisis turpis vel velit commodo, eget feugiat leo tincidunt. Aenean consequat sapien vitae porttitor euismod. Quisque dictum vitae erat ac commodo. Nunc cursus a dolor et rutrum. Nunc lobortis a urna eu auctor. Curabitur cursus diam non lect</p>
    </section>
   </div>
  </div>
</div>

CSS

.container {
  padding-top: 97px;
}

.main-container {
  background: #00b7ea;
  background: -moz-linear-gradient(top, #00b7ea 49%, #009ec3 100%);
  background: -webkit-linear-gradient(top, #00b7ea 49%,#009ec3 100%);
  background: linear-gradient(to bottom, #00b7ea 49%,#009ec3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
  position: relative;
  height: 220px;
}

.main-container:before {
  content: '';
  position: absolute;
  left: 0;
  top: -53px;
  width: 100%;
  height: 95px;
  background: #00b7ea;
  -webkit-transform: skewY(8.5deg);
  -moz-transform: skewY(8.5deg);
  -ms-transform: skewY(8.5deg);
  -o-transform: skewY(8.5deg);
  transform: skewY(8.5deg);
  -webkit-backface-visibility: hidden;
}

section {
  margin: 10px auto;
  padding: 0 20px;
  padding-bottom: 10px;
  position: relative;
  max-width: 600px;
}

here's the fiddle: https://jsfiddle.net/c1pgeq7j/4/

try to play with transform: skewY(8.5deg); for the other side of slanting and for the gradient try to check colorzilla.