如何使两个图像对角线重叠以形成两个三角形？

Question

如何仅使用 CSS 使两个图像像下面的绘图一样显示？这些图像都是完美的正方形，我知道这样做不会显示图像的这一部分，这是有意的。中间的空隙是我画技不好，不应该有的。

此外，如果在它们相遇的地方可以有一个很好的淡入淡出效果，那会更好，但我假设 css 没有这种魔力？

Answer 1

你将不得不将你的两个图像包装在一个 div 标签中，位置为：relative;设置它，并使用 position: absolute;使用 top、right、bottom 和 left 属性在其中定位图像。

对于图像剪辑，我建议使用剪辑路径。您可以使用这样的在线工具轻松生成您需要的代码： https://bennettfeely.com/clippy/

如果您可以提供一个代码示例，可以帮助我给出更具体的答案。