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

【问题标题】：How to add a clip path to image in tailwind如何在顺风中向图像添加剪辑路径
【发布时间】：2022-03-17 12:24:00
【问题描述】：

我希望在我的网站上制作一个剪辑路径来做分隔符。我想剪掉我的纯白色背景，并允许下面部分中的图像进入它。

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

我似乎找不到任何帮助。

通常在 CSS 中你可以做到这一点。

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

但是使用顺风和 React，我不知道该怎么做。

我正在尝试获得这样的效果。

【问题讨论】：

【解决方案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));

   }

}

然后您可以在 className="clip-your-needful-style"

中调用您的 custome 类到您的 JSX

希望它适用于您的情况...?

【讨论】：