如何为带切角的div（多边形）添加虚线边框并实现指定样式效果？

嘿，我懂你现在的困扰——用clip-path做出带切角的多边形后，普通的边框属性根本没法用，而用repeating-linear-gradient凑出来的虚线边框在切角处又衔接得很生硬，对吧？我之前也碰到过类似的需求，给你分享个能完美实现你要的效果的方案：

核心思路是利用嵌套元素+mask遮罩来实现贴合切角的虚线边框，同时保留你已经实现的切角和阴影效果，具体代码和解释如下：

完整实现代码 #

CSS 部分 #

:root {
  --edge-cut-size: 15px; /* 切角大小，可自定义 */
  --edge-cut-negative: calc(100% - var(--edge-cut-size));
  --edge-cut-formula: polygon(
    var(--edge-cut-size) 0%,
    var(--edge-cut-negative) 0%,
    100% var(--edge-cut-size),
    100% var(--edge-cut-negative),
    var(--edge-cut-negative) 100%,
    var(--edge-cut-size) 100%,
    0% var(--edge-cut-negative),
    0% var(--edge-cut-size)
  );
  --border-width: 8px; /* 虚线边框粗细 */
  --border-gap: 16px; /* 虚线间距 */
}

* {
  box-sizing: border-box;
}

body {
  margin: 100px;
  background: #f5f5f5; /* 加个背景方便观察阴影 */
}

.shadow {
  /* 调整阴影参数更自然，你可以根据需求修改 */
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.3));
}

.outer {
  width: 500px;
  background: black; /* 虚线边框的颜色 */
  padding: var(--border-width); /* 留出边框的空间 */
  clip-path: var(--edge-cut-formula); /* 应用切角形状 */
}

.inner {
  background: white; /* 主体背景色 */
  padding: 20px;
  clip-path: var(--edge-cut-formula); /* 和外层切角完全对齐 */
  /* 关键：用mask实现虚线边框效果 */
  mask: 
    /* 顶部虚线 */
    repeating-linear-gradient(90deg, transparent 0 var(--border-gap), black 0 calc(var(--border-gap) + var(--border-width))) 0 0 / 100% var(--border-width) no-repeat,
    /* 底部虚线 */
    repeating-linear-gradient(90deg, transparent 0 var(--border-gap), black 0 calc(var(--border-gap) + var(--border-width))) 0 100% / 100% var(--border-width) no-repeat,
    /* 左侧虚线 */
    repeating-linear-gradient(0deg, transparent 0 var(--border-gap), black 0 calc(var(--border-gap) + var(--border-width))) 0 0 / var(--border-width) 100% no-repeat,
    /* 右侧虚线 */
    repeating-linear-gradient(0deg, transparent 0 var(--border-gap), black 0 calc(var(--border-gap) + var(--border-width))) 100% 0 / var(--border-width) 100% no-repeat,
    /* 中间纯色遮罩，只露出边框部分 */
    linear-gradient(black, black) padding-box;
  mask-composite: exclude; /* 把虚线区域的遮罩排除，露出外层的边框色 */
}

HTML 部分 #

<div class="shadow">
  <div class="outer">
    <div class="inner">
      Button
    </div>
  </div>
</div>

方案原理解释 #

1. 切角实现：保留了你原来的--edge-cut-formula变量，通过clip-path给内外层元素都应用相同的切角形状，保证两者完全对齐。
2. 虚线边框：利用内层元素的mask属性，用四个重复线性渐变模拟四个边的虚线，再通过mask-composite: exclude把这些虚线区域的背景遮掉，露出外层元素的黑色（边框色），这样就形成了完美贴合切角的虚线边框。
3. 阴影效果：外层的shadow容器使用filter: drop-shadow，因为clip-path后的元素用box-shadow会被切掉，而drop-shadow可以正确识别元素的实际形状并添加阴影。
4. 灵活调整：你可以通过修改:root里的变量，轻松调整切角大小、边框粗细、虚线间距以及各种颜色。

备注：内容来源于stack exchange，提问作者guitarzero