如何用HTML/CSS创建响应式拼接方块并添加文字？

一、纯CSS实现四个拼接方块 #

完全可以用CSS的clip-path属性实现这种带圆角拼接的方块，还能轻松给每个方块添加文字，不会出现小屏错位问题。你之前的代码只实现了单个形状，我们可以把四个方块拆成独立容器，分别定义不同的clip-path路径，再通过布局组合起来：

完整代码示例 #

<body>
  <div class="shape-container">
    <div class="shape shape-1">
      <span class="shape-text">方块1</span>
    </div>
    <div class="shape shape-2">
      <span class="shape-text">方块2</span>
    </div>
    <div class="shape shape-3">
      <span class="shape-text">方块3</span>
    </div>
    <div class="shape shape-4">
      <span class="shape-text">方块4</span>
    </div>
  </div>
</body>

/* 全局基础样式 */
body {
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* 容器用Grid布局，实现2x2无缝拼接 */
.shape-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: min(90%, 800px); /* 响应式宽度：小屏占90%，大屏最大800px */
  aspect-ratio: 2/1; /* 固定宽高比，避免变形 */
}

/* 基础方块样式 */
.shape {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #e8ebfa, #c2c6f1);
}

/* 响应式文字样式，自动居中 */
.shape-text {
  font-size: clamp(1rem, 2vw, 1.5rem); /* 字体随屏幕大小缩放 */
  font-weight: bold;
  color: #333;
}

/* 四个方块的clip-path路径 */
.shape-1 {
  clip-path: path("M 0,50 A 50,50 0 0 1 50,0 H 100% A 50,50 0 0 1 100%,50 V 50% A 50,50 0 0 0 calc(100% - 50%),calc(50% + 50%) H 50 A 50,50 0 0 1 0,calc(100% - 50%) Z");
}

.shape-2 {
  clip-path: path("M 0,0 A 50,50 0 0 1 50,50 V 50% A 50,50 0 0 0 0,calc(50% + 50%) H calc(100% - 50%) A 50,50 0 0 1 100%,100% V 50 A 50,50 0 0 1 calc(100% - 50%),0 Z");
}

.shape-3 {
  clip-path: path("M 50,0 A 50,50 0 0 1 100%,50 V calc(100% - 50%) A 50,50 0 0 1 calc(100% - 50%),100% H 0 A 50,50 0 0 0 50,calc(100% - 50%) V 50% A 50,50 0 0 1 0,50 Z");
}

.shape-4 {
  clip-path: path("M calc(100% - 50%),0 A 50,50 0 0 1 100%,50 V 50% A 50,50 0 0 1 calc(100% - 50%),calc(50% + 50%) H 50 A 50,50 0 0 0 0,100% V calc(100% - 50%) A 50,50 0 0 0 50,calc(100% - 50%) Z");
}

二、响应式适配优化 #

如果需要在极小屏幕（比如600px以下）改成单列排列，添加媒体查询即可：

@media (max-width: 600px) {
  .shape-container {
    grid-template-columns: 1fr;
    aspect-ratio: 1/2; /* 调整宽高比适配单列 */
  }
}

三、相关工具与库说明 #

• 不需要额外依赖库，纯CSS的clip-path完全能实现这类形状，你可以用可视化的clip-path生成工具（本地/离线工具均可）调整路径，生成符合需求的代码
• 若要快速生成复杂网格图形，css-doodle这类CSS图形库可以简化开发，但纯手写clip-path在灵活性和性能上更有优势

为什么之前的方案失效？ #

用图片+绝对定位文字时，文字位置基于固定像素值，屏幕缩小后图片尺寸变化但文字位置不会自动适配，导致错位；而纯CSS实现的方块内部用flex居中文字，文字会跟着方块尺寸变化自动调整位置，不会出现错位问题。

内容的提问来源于stack exchange，提问作者Tawqeer Khursheed