Javascript 对角分割视频的一侧可见，另一侧不可见

在我的网站上，我有两个视频，但我想同时观看这两个视频，方法是以对角线方式分割屏幕。在一边，我们将有我们的第一个视频在另一边，第二个

是否可以在javascript或css3中创建类似的内容

我试着用这种方式，但是图像在旋转？其他解决方案

CSS

    .set {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
        position: relative;
    }
    section {
        position: absolute;
        top: -100%;
        height: 500vw;
        width: 500vh;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    section + section {
        background: #666;
        top: 0%;
    }
    img {
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
        object-fit: cover;
    }

HTML

<div class="set">
    <section id="a_hov">
        <a href="">
            <img src="example1" alt="" />
        </a>
    </section>

    <section id="b_hov">
        <a href="">
            <img src="example2" alt="" />
        </a>
    </section>
</div>

---

您可以使用CSS

剪辑路径

属性执行此操作

生成它的有用站点：

注意：IE和Edge不支持此属性（）

document.getElementById（“play1”）.addEventListener（“单击”，函数（）{
var v=document.getElementById（“vid1”）.play（）；
});
document.getElementById（“play2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“vid2”）.play（）；
});
document.getElementById（“PlayAll”）.addEventListener（“单击”，函数（）{
document.getElementsByTagName（“视频”）[0].play（）；
document.getElementsByTagName（“视频”）[1].play（）；
});
#vid1{
宽度：300px；
-webkit剪辑路径：多边形（0 100%，0 0，100%100%）；
剪辑路径：多边形（0 100%，0 0，100%100%）；
}
#视频2{
宽度：300px；
左边距：-300px；
-webkit剪辑路径：多边形（100%0,0,100%100%）；
剪辑路径：多边形（100%0,0,100%100%）；
}

播放视频1
播放视频2
同时播放
“是否可能…？”-是。你的相关（“”）HTML、CSS和JavaScript是什么？我的代码已经过时了，但我认为这离解决方案还很远：/Nice demo@yuriy636，但是剪辑路径没有得到很好的支持，用户应该知道这一点@里卡多鲁伊斯是真的，他打算在答案中加上这一点。
        $(function() {
             $(window).on('resize', function() {
                     var h = $(document).height(),
                             w = $(document).width();

                    /*  Math.atan() function returns the arctangent (in radians)
                     *  of a number and 1 rad ~= 57.29577 deg
                     */
                     var angle = Math.atan(h/w) * 57.29577;
                     var rotateProperty = "rotate(" + angle + "deg)";

                     $('section').css({
                            "-webkit-transform": rotateProperty,
                            "-moz-transform": rotateProperty,
                            "transform": rotateProperty
                     });

             })
             .triggerHandler('resize');
        });