SOURCE

<div class='box2'>

box

</div>

.box{
    clip-path: polygon(
        50% 0%,
        50% 100%,
        100% 50%,
        0% 50%
    );
    
        background: #58a;
        height:300px;
        width:300px;
        background-image: url('https://picsum.photos/300/300')
}

div{
    
        background: #58a;
        height:300px;
        width:300px;
        background-image: url('https://picsum.photos/300/300');

}

.box1{
    box-shadow: inset 0 0 30px 30px #fff;

    /* clip-path: ellipse(50px 50px at 50% 50%); */
}

.box2{
    position: relative;
    overflow:hidden;
}
.box2:before{
    content:'';
    height:100%;
    width:100%;
    position:absolute;
    background-color: #fff;
    border-bottom-right-radius: 99%;
    clip-path: 100% 100%;
    /* top: -250px;
    left: -250px; */
}

.box3{
    border-bottom-left-radius: 99%;
}

.note {
    position: relative;
    background: #58a; /* 回退样式 */
    background:
    linear-gradient(-150deg,
    transparent 1.5em, #58a 0);
    border-radius: .5em;
}
.note::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    background: linear-gradient(to left bottom,
    transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4))
    100% 0 no-repeat;
    width: 1.73em;
    height: 3em;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}