I'm trying to make a corner block, to create a one-page as in the photo below. But I ran into a problem.
I tried to make div slopes, but when looking at different resolutions it looked crooked.
[What i need screen](https://i.stack.imgur.com/Eucfz.jpg)

(there was also a problem in that before these inclined divs there was a background image and some holes that left this div, the picture showed through.)[My Fail Screen](https://i.stack.imgur.com/PZMqa.png)

```css
.tri-index-right {
  background: #fff;
  height: 150px;
  width: 100%;
  transform: skewY(4deg);
  overflow: hidden;
  position: relative;
  z-index: 2; /*fail method*/
}
```

I can not understand how to extend this angle using the CSS method at width 100%.

```css
.1 {
  min-width: 500px;
}
#triangle-left {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-right: 100px solid red;
 border-bottom: 100% solid transparent;
}
```

```html
<div class="1">
<div id="triangle-left"></div>
</div>
```

I will be very grateful for the help