如何在Tailwind中添加clip-path属性实现网页区块分割效果

你可以通过以下两种方式实现需求，裁剪白色背景区块底部，让下方内容向上延伸：

方案1：自定义Tailwind工具类（推荐，可全局复用） #

1. 编辑项目根目录的tailwind.config.js，扩展clipPath配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      clipPath: {
        // 可自定义类名，斜度可通过调整6vw的数值修改
        'slant-bottom': 'polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw))',
      },
    },
  },
  plugins: [],
}

2. 配置完成后直接在React组件中使用自定义类即可：

// 头部区块示例
export default function Header() {
  return (
    <header className="clip-slant-bottom bg-white min-h-[70vh] w-full">
      {/* 头部区块的内容 */}
    </header>
  )
}

方案2：内联样式（无需修改配置，适合临时使用） #

如果不需要全局复用该样式，可直接给元素添加style属性实现：

export default function Header() {
  return (
    <header 
      className="bg-white min-h-[70vh] w-full"
      style={{
        clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw))'
      }}
    >
      {/* 头部区块的内容 */}
    </header>
  )
}

注意事项 #

• 如需调整斜向分割的角度，修改calc(100% - 6vw)中的6vw数值即可，数值越大倾斜幅度越高
• Tailwind会自动处理CSS属性的浏览器前缀，无需额外手动添加-webkit-等前缀

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