如何使用CSS制作将两个div分开的倾斜边框

Question

我有两个Divs彼此叠放。我想倾斜它们之间的边界，以便div稍微重叠，就像这样：

Diagram, sorry its crappy

我还试图在两个div中使用固定的背景图片。

针对this question，我尝试了几种解决方案。在得到最佳答案的情况下，我根本无法使图像重叠，并且倾斜会使图像看起来失真。

编辑：感谢您的帮助！使用剪辑路径效果很好

import pandas as pd

df["value"] = df.apply(
    lambda x: x["value"]/(
        (pd.to_datetime(x["end_date"]) + pd.Timedelta(days=1)).month -
        pd.to_datetime(x["start_date"]).month), 
    axis=1
)

.box {
    width: 100vw;
    height: 100vh;
    background-attachment: fixed;
}

.first {
    background-image: url("/static/images/grey-noise.png");
}

.second {  
    clip-path:polygon(0 10vh,100% 0, 100% 100%,0 100%);
    z-index:1;
    margin-top:-10vh;
    background-image: url("/static/images/alena-aenami-lines1k.jpg");
}

.last {
    clip-path:polygon(0 10vh,100% 0, 100% 100%,0 100%);
    z-index:1;
    margin-top:-10vh;
    background-image: url("/static/images/alena-aenami-serenity-1k.jpg");
}