html - 如何对齐形状以便提示与 CSS 连接？

Question

我正在尝试使用 CSS3 来创建形状并将它们对齐，使其看起来像这张图片:

我已经制作了粉色正方形和 4 个灰色矩形。我可以为所有形状制作 div，然后调整边距和旋转，使其看起来像图像。但是，这是硬编码，我认为这不是 CSS 中的好习惯。

#pinkBlock {
  width: 100px;
  height: 100px;
  background-color: #FFC0CB;
  left: 10px;
  top: 10px;
}

#upRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

#downRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

#leftRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

#rightRect {
  width: 50px;
  height: 200px;
  background-color: #D3D3D3;
}

现在，我有 4 个相互堆叠的灰色矩形，底部有一个粉红色方 block 。我该怎么做才能让灰色矩形的尖端相互接触，同时让中间的粉红色方 block 出现？

Answer 1

使用 CSS Grid layout 的简单解决方案- 请参阅下面的演示以及内联解释:

.wrapper {
  display: grid;
  grid-template-areas: '. up .'
                       'left pink right'
                       '. bottom .'; /* define the layout */
  grid-template-rows: 50px 200px 50px; /* define the row heights */
  grid-template-columns: 50px 200px 50px; /* define the column widths */
}

#pinkBlock {
  background-color: #FFC0CB;
  grid-area: pink;
  height: 50px;
  width: 50px;
  justify-self: center; /* align horizontally inside grid item */
  align-self: center; /* align vertically inside grid item */
}

#upRect {
  background-color: #D3D3D3;
  grid-area: up; /* place this in the layout */
}

#downRect {
  background-color: #D3D3D3;
  grid-area: bottom; /* place this in the layout */
}

#leftRect {
  background-color: #D3D3D3;
  grid-area: left; /* place this in the layout */
}

#rightRect {
  background-color: #D3D3D3;
  grid-area: right; /* place this in the layout */
}

<div class="wrapper">
  <div id="pinkBlock"></div>
  <div id="upRect"></div>
  <div id="leftRect"></div>
  <div id="rightRect"></div>
  <div id="downRect"></div>
</div>