如何对齐形状，使笔尖与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个灰色矩形相互堆叠，底部有一个粉红色块。我该怎么做，以使灰色矩形在彼此中间出现粉红色块的同时互相碰触？

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>

Answer 2

考虑到多个背景，您可以仅使用一个元素来完成此操作：

content

setContent