Изображение в виде углов прямоугольника, соединенных прямыми линиями (отзывчиво)

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