How to make (correctly) this?

Question

css

How to make such blocks? (Correct)
Must be responsive + at least support IE a little
I have only 2 options so far
Try to shove svg instead of the background and play with position
Or try clip-path - but there is no support for IE well and with adaptability you will need a lot play

spoiler

Spoiler

Answer 1

Hello. also try the transform: skew property, and there is a polyfill for clip path
https://github.com/AlfonsoFilho/ClipPath

Answer 2

And what is the task? Tilt blocks? copes with this task quite well + there is browser support + adaptability is solved by % values ​​I'll immediately apologize for the shit code (it's really bad for me now), but to show the idea it will do: https://jsfiddle.net/ejoqLu7m/1/ 1. Create a block that offset along the Y axis by N degrees 2. Inside, create a block that you offset along the Y axis by -N degrees. 3. Set the first block to oveflow: hidden 4. Decide the issue of adaptability with a width in% (50% in our example) Responsive\cross-browser. B2 picture by analogy is done. Or I misunderstood the task? transform: skewY(20deg)

Answer 3

I can tell you very well about such games with oblique blocks. Just show me where the text content will be. My thoughts and personal IMHO:
1. If this is a stupid section background - why bother? You can get off with a gradient too...
2. a twisted section and a straightened background do not get along well. As well as in reverse.
3. You can play with pseudo-elements: this is my experiment , and this is a live blank
4. All clippases are cool! But they do not allow you to painlessly fit the blocks into the joint, because. cut off the "viewport", but do not share anything with the box, i.e. it was as square as it was, and will remain. There will be no adjustment to a beveled edge, but a beveled neighbor, keep this in mind. Then they have the overflow property, i.e. they “cut” along with the content, which means that it will have to be moved away from the cut edge with a margin padding.

Answer 4

Where does IE come from in the problem, by the way?