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
  }

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
  }

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;
  }

Does anybody know how to call this css shape?

Thank you!

user_12701949 · Answer

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%);
}

Another option is to use clip-path with an svg:

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

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

1 Answers