This is just a single tip on how to create a teardrop (or a map pin when upside-down) with CSS.

I really like what I made for the loading effect and for the map bubbles!

The shape was made by:

1
2
3
4
5
6
.loading {
    width: 15rem;
    height: 15rem;
    border-radius: 15rem 15rem 0;
    transform: rotate(45deg);
}

The only issue is that the content of the div will be rotated too. So:

1
2
3
.loading div{
    transform: rotate(-45deg);
}