如何使用CSS舍入图像

Question

我正试图完全基于CSS重新创建图像形状。 尽管制作这种精确的形状似乎非常困难，但是我似乎找不到能解决的CSS属性，除了在svg中绘制轮廓并将其转移到CSS属性上外，但这似乎是错误的。

因此，我想知道是否缺少某些东西，这似乎很简单。

可以在此处看到图像形状：

这不是一个简单的border-radius问题，正如先前标记的重复说明的那样，因为它在“边”中凸出，当使用边界半径或“四舍五入”时将是直的。 / p>

Answer 1

显然，该形状称为“松鼠”。找到该术语后，很容易找到已经找到创建形状的解决方案的人。如果有人需要它（绝对不是边界半径那么简单），我将在这里留下解决方案：

请注意，我并未创建此解决方案，应将所有归功于https://codepen.io/mkmueller/的Mkmueller https://codepen.io/mkmueller/pen/wRJYKa

* {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

svg.defs {
    position: absolute;
    width: 0;
    height: 0;
}

.squircle {
    width: 75vmin;
    height: 75vmin;
    background: url(https://source.unsplash.com/user/mkmueller/likes/1000x1000) center / cover, #aaa;
    clip-path: url(#squircle);
}

.wrapper {
    filter: drop-shadow(0 0 100px rgba(#000, .25));
}

<svg class="defs">
    <defs>
        <clipPath id="squircle" clipPathUnits="objectBoundingBox">
            <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" fill="#f00"/>
        </clipPath>
    </defs>
</svg>

<div class="wrapper">
    <div class="squircle"></div>
</div>