Css 由直线连接的矩形角的图像（响应）

我试图在一个矩形框上创建自定义角作为响应html。每个角落都是相似的设计，但应该通过下图中的正常轮廓连接。此外，它必须具有响应能力，并根据设备进行缩放。到目前为止，我在网上找到的任何东西都不能完全解释如何做到这一点。任何帮助都将不胜感激！它应该在图像中间有文本。

---

有很多方法可以做到这一点，其中之一可能是使用

网格

布局

这应该足以让您开始：

HTML

<div class="container">
  <div class="corner-tl"></div>
  <div class="side-t"></div>
  <div class="corner-tr"></div>

  <div class="side-l"></div>
  <div class="content">
    All the content goes in here
  </div>
  <div class="side-r"></div>

  <div class="corner-bl"></div>
  <div class="side-b"></div>
  <div class="corner-br"></div>
</div>

---

非常感谢@barro32-这可以工作，但相当混乱（大量填充、边距调整等，在explorer中看起来很糟糕）-但理论上它可以工作。谢谢如果有人有“更清洁”的解决方案，请发布？非常感谢。

.container {
  display: grid;
  grid-template-columns: 10px auto 10px;
  grid-template-rows: 10px auto 10px;
}
.corner-tl {
  background-image: url('top-left.png');
}
.side-t {
  background-image: url('top.png');
  background-repeat: repeat-x;
}
...
...