如何在顺风中向图像添加剪辑路径

Question

我正在寻找一个剪辑路径来在我的网站上做分隔线。我想剪掉纯白色背景，并允许下面部分中的图像进入其中。

我看过 css 示例，但我使用的是 Tailwinds 和 Next.jS

我似乎无法找到任何帮助。

通常在 CSS 中你可以这样做。

header {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - 6vw)
  );
}

但使用顺风和反应，我不知道如何做到这一点。

我正在努力达到这样的效果。

这就是我试图通过 React/NExt.js 和 tailwind 实现的目标

Answer 1

在React中，转到您的index.css文件，其中存在@tailwind指令，并在utilities指令下创建您自己的自定义实用程序类，如下所示 -

@layer utilities {

   .clip-your-needful-style {

       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));

   }

}

然后你可以将你的custome类调用到你的JSX中className =“ clip-your-needful-style ”

希望它能适用于你的情况......

Answer 2

您可能会发疯并使用一些顺风魔法，而不需要在 css 中创建您自己的类。像这样

<div class="[clip-path:polygon(0%_0%,100%_0%,100%_100%)]">
  ...
</div>

虽然不确定它是否可以使用，calc而且语法有点难看。
资源：https ://tailwindcss.com/docs/adding-custom-styles#任意-properties