CSS如何实现双色、不同方向的斜向边框效果？

你原来的代码存在3个核心问题，修正后即可实现预期效果：

• 选择器不匹配：CSS中定义的是.footer类选择器，但HTML中的footer标签没有添加对应类名，导致外层样式完全不生效
• clip-path参数错误：外层的裁剪路径参数逻辑错误，仅保留了左侧边缘，右侧区域被完全裁剪
• 缺少必要内边距：裁剪后容器顶部预留空间不足，会导致内部内容被裁切

修正后的完整代码 #

/* 先重置默认边距，避免出现缝隙 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.footer {
  background-color: #6bbbb1;
  /* 外层裁剪路径：左上顶点在容器左上角，右上顶点向下偏移6vw，底部两个顶点保持正常 */
  clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);
  /* 预留足够顶部空间放inner的斜切区域 */
  padding-top: 8vw;
}
.inner {
  background: #1e557e;
  /* 内层裁剪路径：左上顶点在容器高度15%的位置，右上顶点在容器顶部，底部两个顶点保持正常 */
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  /* 内边距避免内容贴边 */
  padding: 5vw 2rem 2rem;
  color: #fff;
}

<footer class="footer">
  <div class="inner">
     <div>Footer</div>
     <div>Footer menu</div>
     <div>Logo</div>
  </div>
</footer>

如果需要调整斜切的角度，修改clip-path里的百分比或者vw数值即可，数值差越大斜切角度越大。

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