html画正方形少一角

这个做法 本质原理是在正方形的上面添加一个图形覆盖。
然后做个 overflow: hidden;就行

    .border {
            position: relative;
            margin-top: 300px;
            margin-left: 200px;
            width: 400px;
            background: white;
            height: 500px;
            overflow: hidden;
        }

        .border:after {
            position: absolute;
            bottom: -1px;
            left: -1px;
            content: "";
            border-right: 50px solid transparent;
            border-bottom: 50px solid white;

        }
        .border::before {
            position: absolute;
            top: -1px;
            right: -1px;
            content: "";
            border-left: 50px solid transparent;
            border-top: 70px solid white;
        }

   <div class="border">

        <img src="./img/0a18f529e04ec6ab628c6329e392da63.jpg" alt="">
    </div>