如何实现与参考图效果完全一致的自定义hr分割线？

你现有代码的问题在于:before和:after两个伪元素共用了同一份朝左斜切的clip-path规则，右侧的分割线需要用镜像的斜切路径，同时把border写法替换成固定高度的背景填充，更方便控制斜切比例，调整后的可用代码如下：

.divider {
  color: #1D0000;
  display: flex;
  text-transform: uppercase;
  align-items: center;
  margin: 1em -1em;
}
.divider:before, .divider:after {
  content: "";
  flex: 1;
  height: 3px; /* 对应分割线粗细 */
  background: #1D0000;
  margin: 0 1em;
}
/* 左侧分割线：右上角斜切 */
.divider:before {
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
/* 右侧分割线：左上角斜切，和左侧镜像 */
.divider:after {
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}

<h2 class="divider">Testing</h2>

如果需要修改斜切的角度，调整clip-path里的8px数值即可，数值越大斜切的缺口越大。

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