1

I'm trying to create a footer for a site that has this split color design, where's there's two triangles almost overlapping one another. Any ideas would be greatly appreciated!

Thanks!

enter image description here

I attempted something like this:

    background: linear-gradient(120deg, #ba5459 48%, #97444c 48%);
Marc
  • 107
  • 6

1 Answers1

3

Its not overlapping triangles its a special CSS property called clip-path which is used to clip the rectangular div into various shapes. Create a div first and then in CSS paste the following property. Play with the values to understand its behavior.

clip-path: polygon(0 24%, 100% 0%, 100% 99%, 0% 100%);

You can learn more about clip path over there.

Aqib Naeem
  • 431
  • 3
  • 11
  • This seems to be almost working... I've got a parent div with the darker red as a background-color. Then a div inside of that with the alternate red as a background-color and the clip-path styling above. – Marc Aug 23 '21 at 16:52
  • Here's a fiddle to illustrate: https://jsfiddle.net/abed8grs/6/#&togetherjs=lbcn2V28N9 – Marc Aug 23 '21 at 16:55
  • Final, working css code: background: linear-gradient(to bottom right,transparent 49.5%, #ba5459 50%), linear-gradient(to bottom left,transparent 49.5%,#97444c 50%); – Marc Aug 23 '21 at 20:43