如何使用CSS实现被斜线而非水平线分割的矩形框效果

云原生阿岚

2026-9-28

CSS实现斜线分割矩形的方案

以下是两种常用的纯CSS实现方式，不需要额外引入图片，适配性强：

方法1：linear-gradient线性渐变实现（推荐）

这是实现成本最低的方案，直接给目标元素设置背景渐变即可，适合只需要视觉分割的场景：

.diagonal-split {
  width: 300px;
  height: 200px;
  /* 135deg为斜线倾斜角度，两个颜色在50%的位置硬切分界，无过渡效果 */
  background: linear-gradient(135deg, #2563eb 50%, #f97316 50%);
}

调整第一个参数的角度值，即可修改斜线的倾斜方向
调整两个颜色后的百分比数值，即可修改两块区域的占比
如果需要中间带分割线的效果，可修改渐变参数：linear-gradient(135deg, #2563eb 49%, #ffffff 49%, #ffffff 51%, #f97316 51%)，即可得到2px宽度的白色分割线

方法2：clip-path裁剪实现

如果需要给两个分割区域分别添加独立内容、绑定交互事件，可用两个元素分别裁剪后拼接：

.split-container {
  width: 300px;
  height: 200px;
  position: relative;
}
.split-left {
  position: absolute;
  inset: 0;
  background: #2563eb;
  /* 裁剪出左半侧三角形区域 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.split-right {
  position: absolute;
  inset: 0;
  background: #f97316;
  /* 裁剪出右半侧三角形区域 */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

两个区域完全独立，可分别插入文本、图片等内容，绑定点击等交互事件也不会互相影响。调整polygon内的坐标参数，即可自定义斜线的倾斜角度和分割比例。