如何用CSS制作如图所示的响应式多边形卡片？

数据老陈

2026-8-1

多边形卡片边框修复与响应式实现方案

一、边框显示问题修复

你的代码未给主元素设置边框样式，也未给伪元素添加背景色，导致无法呈现预期的边框效果。调整思路是：用主元素承载边框，伪元素作为卡片背景层，两者共同应用clip-path裁剪，就能得到带边框的多边形卡片。

修改后的CSS代码：

.shape {
  width: 300px;
  height: 96px;
  position: relative;
  border: 2px solid #2c3e50; /* 设置边框颜色与宽度 */
  border-radius: 10px;
  z-index: 1; /* 确保边框层在背景上方 */
}

.shape::before {
  content: "";
  border-radius: 8px; /* 比主元素圆角小2px，避免与边框重叠 */
  width: calc(100% - 4px); /* 减去左右边框总宽度 */
  height: calc(100% - 4px); /* 减去上下边框总宽度 */
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -1; /* 背景层置于边框下方 */
  background-color: #ffffff; /* 设置卡片背景色 */
}

.shape, .shape::before {
  -webkit-clip-path: polygon(100% 0, 100% 61%, 74% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 61%, 74% 100%, 0 100%, 0 0);
}

二、响应式实现方案

不一定需要依赖media query，优先用相对单位就能实现基础响应式：

将固定宽高替换为vw（视口宽度单位），比如width: 80vw; height: 25vw;，卡片会随视口宽度自动缩放，保持比例一致。
边框宽度也用相对单位，比如border: 0.5vw solid #2c3e50;，避免在小屏幕上边框过粗。
若要在特定断点调整卡片比例或多边形顶点位置，再添加media query：

/* 平板及以下设备调整尺寸 */
@media (max-width: 768px) {
  .shape {
    width: 90vw;
    height: 30vw;
  }
}

/* 若需要调整多边形形状，修改clip-path的百分比值 */
@media (max-width: 480px) {
  .shape, .shape::before {
    -webkit-clip-path: polygon(100% 0, 100% 65%, 78% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 65%, 78% 100%, 0 100%, 0 0);
  }
}