CSS 利用mask-image遮罩剪裁各种各样图案

先看效果

实现

我随便从网上找了几张不规则的图，用来演示剪切出的各种图案。

    <img src="./logo.jpg" alt="" class="cover">
    <img src="./logo.jpg" alt="" class="cover start">
    <img src="./logo.jpg" alt="" class="cover leng">
    <style>
        .cover {
            width: 202px;
            height: 268px;
            mask-image: url(./cover.png);
            -webkit-mask-image: url(./cover.png);
            mask-position: 0;
            -webkit-mask-position: 0;
            mask-size: 100%;
            -webkit-mask-size: 100%;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
        }

        .start {
            mask-image: url(./start.png);
            -webkit-mask-image: url(./start.png);
        }

        .leng {
            mask-image: url(./leng.png);
            -webkit-mask-image: url(./leng.png);
        }
    </style>

再也不用担心UI出的各种奇葩户型了!

兼容性注意

并不是所有浏览器都支持
请注意使用场景！！