偶然看见这种效果，三角形的背景跟图片是一样的，所以就想到了这个办法
具体代码：
<div class="clip">
<div class="img"></div>
<img src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto" alt="">
</div>
*{box-sizing: border-box;}
.clip{width: 200px;height: 400px;margin:50px auto;position: relative;}
.clip .img{height: 400px;background: url(https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto)no-repeat top/cover;}
.clip .img:after{content: "";display: block;border: 15px solid #f5f5f5;position: absolute;top: 0;left: 0;right: 0;bottom: 0}
.clip img{height: 100%;width: 100%;object-fit: cover;position: absolute;top: 0;left: 0;clip-path: polygon(8% 10%, 8% 5%, 8% 17%, 0% 13%);}
如需修改小三角位置，只需微调 clip-path 即可
