Is it possible to make non-standard backgrounds in responsive design? Is it worth it at all?

Question

css

Recently I was asked to make the site adaptive, this is how some blocks in the design look like:
Mobile version.

Tablet version.

As you can see, all the blocks there are arrows that are directed downwards.
How can this be implemented so that the arrows look normal in both the mobile version and the PC?
How I tried: I
made blocks of the usual shape, which I set a rectangular background, but with a cropped arrow. After that, each block was connected and received arrows.
With different ones
background-cover
- when the coverbackground stretched and the arrows were cut off (disappeared, because the picture was stretched)
- containwhite space appears on the sides of the background.
Such solutions are not suitable.
What would you do in such a case?
How can this be implemented, or at least simulated implementation? (So ​​that the arrows fall into place)

Answer 1

You can try to do it with transformations.
Here's a quick example I sketched:

<div class="treangle">
  <div class="treangle--left"></div>
  <div class="treangle--right"></div>
</div>

CSS:

body, html {
  height: 100%;
  width: 100%;
}
.treangle {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  overflow: hidden;
  
  [class*='treangle--'] {
    width: 100%;
    height: 50%;
    position: absolute;
    background-color: yellow;
  }
  
  .treangle--left {
    float: left;
    left: -50%;
    transform: rotate(20deg);
    transform: matrix(-1, -0.2, 0, 1, 0, 0);
  }
  
  .treangle--right {
    float: right;
    right: -50%;
    transform: rotate(-20deg);
    transform: matrix(1, -0.2, 0, 1, 0, 0);
  }
}

Everything will resize as it should. It's just a matter of browser support.
Working example.

Answer 2

media queries.

Answer 3

Hello,
First they install Windows, leaving the necessary space for the subsequent installation of Linux, since Windows overwrites Grub during installation and installs its own bootloader.