How to make triangle section separator [closed]

Problem :

I have to do the integration of a mockup. But I am wondering if there is a way to do it only in CSS.

We have a (diagonal) triangle section separator, and I don't know how to make them in CSS (except with image or svg). And if this is even possible?

My separator looks like this: . (It's a huge rectangle triangle at the top of the section).

I'm speaking of the part at the top of the blue line here:

.

Do you know if it's possible to do it with CSS rules? And if so, how can I do this?

Solution :

Something like this should do. Using vw (viewport-width) to span the entire container.

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 30px 100vw;
  border-color: transparent transparent #007bff transparent;
  }

<div class="triangle"></div>

You can attach this to a :before pseudo-selector on your container.

You will have to do some work for cross-browser compatibility however. See the caniuse on this for more information and updates on supported browsers.