使用 CSS Masks 和 Transforms 创建斜角边缘

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度!

Jeremy Frank 提供了一种非常简单巧妙的方法,可以让元素的末端不是完全水平的,而是呈倾斜状。

.section {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

只需确保底部有足够的填充,以免重要内容被截断。

直达链接 →