如何制作与示例图一致的底部边框样式？

你当前的clip-path坐标点逻辑存在偏差，尤其是底部拐点的比例设置不对，导致样式和预期不符。另外，直接用clip-path裁剪单个元素只能得到裁剪后的形状，要做出边框效果，需要内外两层元素配合：外层作为边框载体，内层作为内容容器，通过嵌套实现视觉上的边框效果。

调整后的clip-path坐标 #

假设你要的是顶部左右小切角、底部左右带斜切小三角的边框，修正后的多边形坐标如下：

.custom-shape {
  clip-path: polygon(
    15% 0,    /* 左上切角终点 */
    0 0,      /* 左上角 */
    0 15%,    /* 左上切角起点 */
    0 85%,    /* 左下斜角起点 */
    5% 100%,  /* 左下三角顶点 */
    95% 100%, /* 右下三角顶点 */
    100% 85%, /* 右下斜角起点 */
    100% 15%, /* 右上切角起点 */
    100% 0,   /* 右上角 */
    85% 0     /* 右上切角终点 */
  );
}

实现边框效果的完整代码 #

通过两层div嵌套，外层设置边框样式和裁剪路径，内层作为内容区（用背景色覆盖外层内部，模拟边框视觉）：

<div class="border-box">
  <div class="content-box">
    这里是内容区域
  </div>
</div>

.border-box {
  width: 300px;
  height: 200px;
  padding: 4px; /* 这里的padding值就是边框宽度 */
  background: #2c3e50; /* 边框颜色 */
  clip-path: polygon(
    15% 0,
    0 0,
    0 15%,
    0 85%,
    5% 100%,
    95% 100%,
    100% 85%,
    100% 15%,
    100% 0,
    85% 0
  );
}

.content-box {
  width: 100%;
  height: 100%;
  background: #ecf0f1; /* 内容区背景色 */
  clip-path: polygon(
    15% 0,
    0 0,
    0 15%,
    0 85%,
    5% 100%,
    95% 100%,
    100% 85%,
    100% 15%,
    100% 0,
    85% 0
  );
}

关键调整说明 #

• 外层的padding值直接决定边框宽度，通过内外层使用完全相同的裁剪路径，让外层的padding区域露出成为边框。
• 若要调整切角、三角的大小，直接修改坐标中的百分比即可：比如把顶部切角的15%改成10%，切角会更小；底部三角的5%改成8%，三角会更大。

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