Html 使用css自定义图像形状

我正在尝试使用css创建一个自定义形状，使其看起来像： 我尝试过CSS3掩码，但支持不够广泛，我需要支持IE 10、Firefox和Chrome

HTML:

来自Illustrator的SVG掩码代码

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Lag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="348px" height="326px" viewBox="0 0 348 326" enable-background="new 0 0 348 326" xml:space="preserve">
    <g>
        <defs>
            <image id="SVGID_1_" x="0" y="0" width="348" height="326"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="hidden"/>
        </clipPath>
        <path clip-path="url(#SVGID_2_)" fill="#E52929" d="181px 1.4833px, 40.0206px 0px,-132.2294,40.6903-171.9397,127.7856
    c-39.7103,87.0961,78.2502,157.8612,97.9829,170.1088c19.7319,12.2485,58.5174,42.1872,117.0348,12.2485
    c58.5174-29.9395,118.3957-94.5812,121.7973-130.6441c3.4026-36.0629-1.7918-74.5152-52.6753-118.7237
    C243.2785,18.7341,220.6634,1.4833,181.1749,1.4833"/>
    </g>
</svg>

---

以下是您所寻找的一种近似纯CSS方式：

。图像保持器{
位置：相对位置；
溢出：隐藏；
高度：150像素；
宽度：150px；
}
.图像持有者：之前{
盒影：0 1000px#fff；
变换：旋转（-45度）；
边界半径：40px；
位置：绝对位置；
内容：''；
底部：10px；
右：10px；
左：10px；
顶部：10px；
}
.图像支架{
显示：块；
高度：自动；
宽度：100%；
}

---

您可以在父元素上使用带有溢出：隐藏的大型

框阴影来创建此类形状


.element{
利润率：20px；
背景：url（'https://img.grouponcdn.com/deal/5EXVDNMDEe1mtyEK6Pgp/ZC-1057x634/v1/c700x420.jpg');
背景尺寸：封面；
填充：25px；
背景位置：中心；
显示：内联块；
溢出：隐藏；
}
.形状{
宽度：140px；
高度：140像素；
边界半径：60px；
变换：旋转（45度）；
盒影：0px 0px 0px 200px白色；
}


.image_holder {
        margin: 0 auto;
        max-width: 348px;
        max-height: 326px;
        position: absolute;
        top: 0;
        bottom: -23px;
        left: 0;
        right: 0;
        margin-top: 10px;

        @media (max-width: 991px) {
            bottom: inherit;
        }

        .image {
            background-repeat: no-repeat;
            background-position: 0 0;
        }
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Lag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="348px" height="326px" viewBox="0 0 348 326" enable-background="new 0 0 348 326" xml:space="preserve">
    <g>
        <defs>
            <image id="SVGID_1_" x="0" y="0" width="348" height="326"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="hidden"/>
        </clipPath>
        <path clip-path="url(#SVGID_2_)" fill="#E52929" d="181px 1.4833px, 40.0206px 0px,-132.2294,40.6903-171.9397,127.7856
    c-39.7103,87.0961,78.2502,157.8612,97.9829,170.1088c19.7319,12.2485,58.5174,42.1872,117.0348,12.2485
    c58.5174-29.9395,118.3957-94.5812,121.7973-130.6441c3.4026-36.0629-1.7918-74.5152-52.6753-118.7237
    C243.2785,18.7341,220.6634,1.4833,181.1749,1.4833"/>
    </g>
</svg>