如何使用 CSS 在两个图像之间创建剪辑路径

Question

如何使用 CSS 重新创建此模型？在 Photoshop 中使用图层蒙版很容易创建它，但如何使用 CSS 重新创建它？

它需要响应，所以我宁愿编码而不是上传图像。

image mock-up

Answer 1

贝塞尔曲线 svg 剪辑路径可能是您所需要的，两个 div 的 z-index 比另一个高。这说明了技术，最好在图形工具中绘制贝塞尔曲线。

https://codesandbox.io/s/bezier-curve-clip-path-h8x8l?from-embed

您将在顶部覆盖一个带有剪辑路径的 div，然后为其设置不透明度和颜色，使其透出。