css - 带角度的分隔线，在下面的部分中带有图像

Question

我正在用我的 React 应用程序做一个切片或有角度的边缘。我正在使用tailwinds css，但是使用一些自定义CSS我设法完成了它。然而，当它做切片时，我希望它用它下面的 div 而不是白色填充。

那可能吗？

这是我的 CSS

 .angle--bottom-right {
    position: relative;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
  }
  
  @supports not ((-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%))) {
    .angle--bottom-right::before, .angle--bottom-right::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid;
    }
    .angle--bottom-right::after {
      bottom: 0;
      border-width: 0 0 8vw 100vw;
      border-color: transparent transparent transparent transparent;
    }
  }

这就是我发生的事情

我想用它下面的 DIV 填充白色三角形。

标签： cssreactjstailwind-css

Answer 1

恐怕在这种情况下您将无法使用剪辑路径。身体背景将在暴露的区域中显示出来。