Responsive irregular background shape with CSS

Question

I have been trying to achieve the same result as shown in the image with plain CSS. I have tried using a background image (cover...), but it\'s not responsive (cuts the shape) I

Answer 1

An element can have multiple background images so you could use images for the end caps and a matching color fill for the actual content area.

This demo is rough but it demonstrates the idea. I've left the fill an obviously different color to make it easier to see what's what. I'm using quick screenshots of your sample image and I caught a bit of the edge, causing the lines extending from the caps. But you get the idea.

.demo {
  padding: 24px 72px;
  color: white;
  background-color: skyblue;
  background-image:
    url(https://i.imgur.com/LocAlN0.png),
    url(https://i.imgur.com/zXDA91q.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 center, center right;
}

   Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots.