创建一个类似泪珠的css形状，不旋转，并以图像为背景

Question

我想创建一个这样的css形状(我不知道那个形状的名字(，并添加一个背景图像。你们能帮我吗？

这是形状：

.figure{
width: 180px;
height: 180px;
border: 1px solid #32557f;
border-radius: 0 50% 0% 50%;
transform: rotate(45deg);
bottom: -50px;
position: relative;
left: 17px
}

<div class="figure"></div>

如果我附加背景图像，它也会受到旋转的影响。

.figure{
width: 180px;
height: 180px;
border: 1px solid #32557f;
border-radius: 0 50% 0% 50%;
transform: rotate(45deg);
background-size: 100%;
background-image:url('https://images.unsplash.com/photo-1593642634315-48f5414c3ad9');
background-repeat:no-repeat;
bottom: -50px;
position: relative;
left: 17px
}

<div class="figure"></div>

---

好的，我目前的解决方案是这样的：

.figure {
width: 180px;
height: 180px;
border: 1px solid #32557f;
border-radius: 0 50% 0% 50%;
transform: rotate(45deg);
bottom: -50px;
position: relative;
left: 17px;
overflow: hidden;
}

.test{
background-image: url(https://images.unsplash.com/photo-1602000750546-f8e331a082d1);
transform: rotate(-45deg);
height: 145%;
width: 142%;
background-size: cover;
background-repeat: no-repeat;
background-size: 100%;
position: fixed;
top: -43px;
right: -44px;
}

<div class="figure">
<div class="test"></div>
</div>

有人知道如何称呼这个css形状吗？

谢谢！

Answer 1

您可以使用img而不是background-image，并使用transform: rotate(-45deg):抵消旋转

.figure {
width: 180px;
height: 180px;
border: 1px solid #32557f;
border-radius: 0 50% 0% 50%;
transform: rotate(45deg);
bottom: -50px;
position: relative;
left: 17px;
overflow: hidden;
}
img {
height: 142%;
transform: rotate(-45deg) translateY(-39%);
}

<div class="figure">
<img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" />
</div>

---

另一个选项是将clip-path与svg:一起使用

img {
height: 260px;
clip-path: url(#teardrop);
}

<img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" />
<svg>
<clipPath id="teardrop">
<path
d="M88.49 0C121.05 32.57 141.41 52.92 149.55 61.06C186.12 97.63 186.12 156.93 149.55 193.5C141.41 201.64 121.05 221.99 88.49 254.56C55.92 221.99 35.57 201.64 27.43 193.5C-9.14 156.93 -9.14 97.63 27.43 61.06C35.57 52.92 55.92 32.57 88.49 0Z"
></path>
</clipPath>
</svg>