Css 不规则div背景，具有响应性布局

我有以下图像：

在基础框架中，需要四列DIV的背景。div标题需要在黑色的缎带中，内容在下面的框中

我遇到的问题是，在浏览器中调整网格大小时，如何使背景正常工作。我不想只为这个背景编写大量的媒体查询。我尝试过使用background size:cover属性，但这会导致它在手机上看起来像可怕的像素，在平板电脑大小上无法正确覆盖div。我也尝试过绝对定位，但也不起作用

有什么帮助吗

---

谢谢

此背景太简单，无法使用图像。只需使用纯CSS即可

如果您在生成有角度的边框时遇到困难，这里有一个简单的教程>

---

出于某种原因，我从未想到过这一点——我只是画了一条纯CSS响应功能带，它工作起来没有问题。干杯