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

Question

我正在尝试在矩形框上创建自定义角落作为响应式HTML。每个角都是类似的设计，但它应该通过正常的轮廓连接，如下图所示。此外，它必须根据设备进行响应和扩展。到目前为止，我在网上找到的任何内容都没有解释如何实现这一点。非常感激任何的帮助！根据图像，它应该在中间有文字。

Answer 1

有很多方法可以做到这一点，一种可能是使用grid布局。

这应该足以让你入门：

<强> 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>

<强> CSS

.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;
}
...
...