创建一个类似 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>