Пять коробок, четыре в углу и одна в центре

Question

У меня есть задание, но я застрял в проектировании. У меня пять коробок, четыре коробки должны быть в углу и одна коробка в центре. Разработанное изображение здесь

Я пытался работать с таблицей HTML, но не работал. Отзывчивый приоритет. Заранее спасибо.

Это код, который я пробовал.

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;border-style:solid;border-width:1px;overflow:hidden;word-break:normal}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}

.topleft{
  background-color: lightgrey;
  width: 150px;
  height:150px;
  border: 50px solid #fff;
  padding: 25px;
}
.topright{
  background-color: lightgrey;
  width: 150px;
  height:150px;
  border: 50px solid #fff;
  padding: 25px;
  display:inline-block;

}
.middle{
  background-color: #ed0e0e;
  width: 150px;
  height:150px;
  border: 50px solid #fff;
  padding: 25px;
   display:inline-block;
}
.bordertopleft{
    border-top: none;
    border-left: none;
  background: #ff00005c;
  }
  .bordertopright{
    border-top: none;
    border-right: none;
  background: #ff00005c;

  }
  .borderbottomleft{
  border-bottom: none;
    border-left: none;
  background: #ff00005c;
  }
  .borderbottomright{
   border-bottom: none;
    border-right: none;
  background: #ff00005c;

  }


.rightt{
text-align:right !important;

}
.middle_inline{
   text-align:center !important;
}
.lefttop1{
border-bottom:1px solid;
border-right:1px solid;

}
.righttop1{
border-bottom:1px solid;
border-left:1px solid;

}
.leftbottom1{
border-top:1px solid;
border-right:1px solid;

}
.rightbottom1{
border-top:1px solid;
border-left:1px solid;

}
.bo{
border:1px solid;
width: 1000px;
}
.boo{
border-top: 1px solid #000 !important;
}
.boo2{

}
.mid{
    width: 150px;
    height: 150px;
background-color:red;
}

<div class="bo" >
<table class="tg" style="width:1000px;height:400px;border: 0px solid #fff;">
  <tr>
    <th class="tg-0pky">
  <div class="lefttop1"><div class="topleft bordertopleft"></div></div>

  </th>
    <th class="tg-0pky "></th>
    <th class="tg-0pky rightt  "><div class="righttop1"><div class="topright bordertopright"></div></div></th>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky middle_inline boo"><div class="boo2"><div class="middle"><div class="mid"></div></div></div></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
        <td class="tg-0pky "><div class="leftbottom1">	<div class="topleft borderbottomleft"></div></div></td>
        <td class="tg-0pky"></td>
        <td class="tg-0pky rightt "><div class="rightbottom1"><div class="topright borderbottomright"></div></div></td>
      </tr>
    </table>
    </div>

В этом коде невозможно отобразить среднюю рамку.

Answer 1

Я не уверен, что это то, что вы ищете, но если коробки чисто эстетические, вы можете попробовать что-то подобное и немного отрегулировать границы. Я использую комбинацию flex-box и абсолютного позиционирования.

HTML:

<div class="box-cont">
  <div class="top-right">
    <div class="inner-pink"></div>
  </div>
  <div class="top-left">
    <div class="inner-pink"></div>
  </div>
  <div class="bottom-right">
    <div class="inner-pink"></div>
  </div>
  <div class="bottom-left">
    <div class="inner-pink"></div>
  </div>
  <div class="mid">
    <div class="inner-red"></div>
  </div>
</div>

CSS:

.box-cont {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  min-height: 500px;
  min-width: 500px;
}

.inner-red {
  background: #ed0e0e;
  padding: 50px;
}

.inner-pink {
  background: #ff00005c;
  padding: 50px;
}

.top-right,
.top-left,
.bottom-right,
.bottom-left,
.mid {
  background: #fff;
  border: 1px solid #000;
  display: inline-flex;
  padding: 50px;
  position: absolute;
}

.top-right {
  top: -75px;
  right: -75px;
}

.bottom-right {
  bottom: -75px;
  right: -75px;
}

.bottom-left {
  bottom: -75px;
  left: -75px;
}

.top-left {
  top: -75px;
  left: -75px;
}

Answer 2

Вы можете взглянуть на следующий пример. Размеры блоков определены в container.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 100px);
}

.corner {
  border: 1px solid black;
  position: relative;
}

.corner:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.corner:nth-of-type(2) {
  grid-column: 5;
  grid-row: 1;
}

.corner:nth-of-type(2) .inset {
  right: 0; 
}

.corner:nth-of-type(3) {
  grid-column: 1;
  grid-row: 5;
}

.corner:nth-of-type(3) .inset { 
  bottom: 0;
}

.corner:nth-of-type(4) {
  grid-column: 5;
  grid-row: 5;
}

.corner:nth-of-type(4) .inset {
  bottom: 0;
  right: 0;
}

.corner .inset {
  background: pink;
  width: 75%;
  height: 75%;
  position: absolute;
}

.mid {
  grid-column: 3;
  grid-row: 3;
  background: darkred;
  padding: 12.5%;
}

.mid .inset {
  width: 100%;
  height: 100%;
  background: red;
}

<div class="container">
  <span class="corner"><div class="inset"></div></span>
  <span class="corner"><div class="inset"></div></span>
  <div class="mid"><div class="inset"></div></div>
  <span class="corner"><div class="inset"></div></span>
  <span class="corner"><div class="inset"></div></span>
</div>