css制作斜边

使用 CSS 制作斜边效果

通过 clip-path 实现斜边

clip-path 属性允许通过多边形裁剪元素，创建斜边效果。以下代码示例展示如何为元素添加从左下到右上的斜边：

.element {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

此代码将元素顶部保持水平，右侧保留 80% 高度，左侧延伸至底部，形成斜切效果。调整百分比可改变斜边角度。

使用 transform: skew() 倾斜元素

skew() 变形函数可对整个元素进行倾斜，模拟斜边视觉效果：

.skewed-element {
  transform: skewY(-10deg);
}

负值表示逆时针倾斜，正值表示顺时针倾斜。需注意此方法会倾斜元素内的所有内容，可能影响文本可读性。

伪元素叠加法

通过伪元素创建绝对定位的三角形，叠加在父元素边缘实现斜边：

.parent {
  position: relative;
  overflow: hidden;
}
.parent::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(to right top, transparent 49%, #fff 50%);
}

此方法使用渐变生成透明三角形，适合需要单侧斜边的场景。调整渐变方向可改变斜边朝向。

SVG 遮罩技术

结合 SVG 和 CSS 创建精确控制的斜边：

<div class="svg-mask"></div>

<style>
.svg-mask {
  -webkit-mask: url(#mask);
  mask: url(#mask);
}
</style>

<svg width="0" height="0">
  <defs>
    <mask id="mask" maskUnits="objectBoundingBox">
      <polygon points="0 0, 1 0, 1 0.8, 0 1" fill="white"/>
    </mask>
  </defs>
</svg>

SVG 方法适合复杂斜边形状，支持响应式调整，但需要额外 HTML 结构。

注意事项

• 斜边效果可能导致边缘内容被裁剪，需合理设置内边距
• 对于需要背景穿透的场景，推荐使用透明渐变或 SVG 方案
• 移动端浏览器需测试 clip-path 的兼容性，必要时添加 -webkit- 前缀