Peculiar Background Css Design

I would like to make a CSS background on 'div' with a specific design and this design should be responsive (width and height). You can view the example generated with the propertie

Solution 1:

Simply use gradient and multiple background:

.box {
  color:#fff;
  padding:30px030px;
  background:
   linear-gradient(to bottom left,#b60f8049%, transparent 51%) bottom/100%30px no-repeat,
   linear-gradient(to top left,#b60f8049%, transparent 51%) top/100%30px no-repeat,  
   linear-gradient(#b60f80,#b60f80) center/100%calc(100% - 60px) no-repeat;
}

body {
 background:#ccc;
}

<divclass="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, sit amet pharetra ex blandit luctus. Morbi facilisis vel est eu interdum. Sed semper, erat a molestie tincidunt, purus velit luctus dolor, nec tristique ex neque eget tortor. Vestibulum a rhoncus ex. Aenean neque massa, porta a nulla non, faucibus pretium magna
</div><divclass="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, 
</div>