CSS如何实现双对角边框/边角？已有半成品求完善方法

要完成你想要的效果，我们可以通过调整伪元素的实现方式，同时利用伪元素添加线条来达成目标。以下是完整的代码示例：

最终实现代码 #

HTML #

<div id="block"></div>

CSS #

/* 全局初始化，消除默认边距 */
body {
  margin: 0;
  padding: 0;
  position: relative;
}

/* 顶部贯穿页面的线条 */
body:before {
  content: '';
  position: absolute;
  top: 100px; /* 与区块的margin-top保持一致 */
  left: 0;
  width: 100%;
  height: 2px;
  background: #000; /* 可根据需求修改线条颜色 */
}

#block {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

/* 实现左上角的内凹缺口 */
#block:before {
  content: '';
  position: absolute;
  top: -2px; /* 向上偏移覆盖顶部线条 */
  left: 0;
  width: 80px;
  height: 82px; /* 线条高度(2px) + 缺口高度(80px) */
  background: #fff;
  /* 通过裁剪路径生成三角形，覆盖顶部线条和区块左上角 */
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

/* 底部贯穿页面的线条 */
body:after {
  content: '';
  position: absolute;
  top: calc(100px + 400px); /* 顶部间距 + 区块高度 */
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
}

代码说明 #

1. 顶部与底部贯穿线条：利用body的before和after伪元素实现两条贯穿页面的水平线条，分别定位在区块的上方和下方，确保线条与区块布局对齐。
2. 左上角内凹缺口：通过#block:before伪元素，使用clip-path裁剪出白色三角形，既覆盖顶部线条的左上角部分，又让区块的左上角形成与背景色融合的内凹效果。
3. 灵活调整：你可以根据需求修改80px（缺口大小）、2px（线条粗细）、颜色等值，适配不同的设计风格。

如果只需要区块范围内的线条（而非贯穿页面），可以使用简化版本：

#block {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
  /* 底部线条直接用边框实现 */
  border-bottom: 2px solid #000;
}

#block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /* 生成白色三角缺口 */
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
}

#block:after {
  content: '';
  position: absolute;
  top: 0;
  left: 80px;
  width: calc(100% - 80px);
  height: 2px;
  background: #000;
}

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