Search code examples
cssbackground-imagelinear-gradientsborder-image

linear-gradient on 2-pieced background

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

design

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

Solution

  • 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! 🙂