css制作斜边

使用 CSS 制作斜边的方法

方法一：使用 clip-path 属性
clip-path 可以通过多边形裁剪实现斜边效果。例如，创建一个右上角斜边的矩形：

.element {
  width: 200px;
  height: 100px;
  background: #3498db;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

调整 polygon 的坐标值可改变斜边的角度和方向。

方法二：使用 transform: skew()
通过倾斜变换实现斜边效果，需配合父容器隐藏溢出部分：

.parent {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
.skewed {
  width: 100%;
  height: 100%;
  background: #e74c3c;
  transform: skewX(-20deg);
  transform-origin: top left;
}

此方法适合需要动态调整倾斜角度的场景。

方法三：CSS 伪元素 + 旋转
通过伪元素旋转生成斜边，适用于单边斜角设计：

.element {
  position: relative;
  width: 200px;
  height: 100px;
  background: #2ecc71;
  overflow: hidden;
}
.element::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: white;
  transform: skewX(20deg);
}

通过调整伪元素的宽度和 skewX 角度控制斜边大小。

方法四：线性渐变背景
利用渐变模拟斜边，适合简单斜线分隔场景：

.element {
  width: 200px;
  height: 100px;
  background: linear-gradient(to bottom right, #9b59b6 50%, transparent 50%);
}

通过调整渐变方向和色标位置改变斜边走向。

注意事项

• clip-path 兼容性较好，但需注意旧版本浏览器的前缀支持。
• transform: skew() 会影响内部内容布局，需额外处理文本反倾斜。
• 伪元素方法适合静态设计，动态调整需结合 JavaScript。