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

Here is an idea based on this previous answer:

.box {
  margin:20px auto;
  font-size:22px;
  min-width:200px;
  display:table;
  padding:10px 30px;
  box-sizing: border-box;
  text-align:center;
  color:#fff;
  position:relative;
  z-index:0;
}
.box::before,
.box::after,
.box span::before,
.box span::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0; 
  right:50%;
  bottom:50%;
  background:#16489F;
  border-radius:10px 0 0 0;
  transform:var(--s,scaleX(1)) skew(-35deg);
  transform-origin:right bottom;
}
.box::after {
  --s:scalex(-1);
}
.box span::before {
  --s:scaleY(-1);
}
.box span::after {
  --s:scale(-1);
}

 some text here

 more and more 
 text here

 even more 
 and more 
 text here


 long long loooooonooooog text 
 and more 
 text here

Like below if you want the radius on the edges:

.box {
  margin:20px auto;
  font-size:22px;
  min-width:200px;
  display:table;
  padding:10px 30px;
  box-sizing: border-box;
  text-align:center;
  color:#fff;
  position:relative;
  z-index:0;
}
.box::before,
.box::after,
.box span::before,
.box span::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0; 
  right:50%;
  bottom:calc(50% - 5px);
  background:#16489F;
  border-radius:10px 0 0 11px;
  transform:var(--s,scaleX(1)) skew(-35deg);
  transform-origin:100% calc(100% - 5px);
}
.box::after {
  --s:scalex(-1);
}
.box span::before {
  --s:scaleY(-1);
}
.box span::after {
  --s:scale(-1);
}

 some text here

 more and more 
 text here

 even more 
 and more 
 text here


 long long loooooonooooog text 
 and more 
 text here