CSS沿对角线把一个矩形截成两个三角形

最近遇到个问题，把矩形截成两个三角形，首先想到渐变，发现实现不了，最后考虑伪类，通过after属性实现

<style>
        html,
        body {
            margin: 0;
        }

        div {
            width: 100vw;
            height: 100vh;
            background-color: white;
        }

        .box:after {
            content: ' ';
            border-top: 100vh solid #black;
            border-left: 100vw solid transparent;
            width: 0;
            position: absolute;
        }
    </style>
    
<div class="box"></div>