Create a teardrop like css shape without rotation and with an image as background

Question

I would like to create a css shape like this (I don't know the name for that shape) and also add a background image to it. Can you guys help me?

Here is the shape:

.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>

If I attach a background image it is also affected by the rotation.

.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>

---

Ok my current solution looks like this:

  .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>

Does anybody know how to call this css shape?

Thank you!

Answer 1

You can use an img instead of background-image and counteract the rotation with 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>

---

Another option is to use clip-path with an 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>