How do I create a teardrop in HTML?

Question

How do I create a shape like this to display on a webpage?

I don\'t want to use images since they would get blurry on scaling

Answer 1

Basic Border-Radius

You can do this within CSS relatively easily using border-radius' and transforms. Your CSS was just a little bit out.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 0 50% 50% 50%;
  border: 3px solid black;
  transform: rotate(45deg);
  margin-top: 20px;
}

Advanced Border-Radius

This will be very similar to above but gives it a bit more shape.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 3px solid black;
  transform: rotate(-45deg);
  margin-top: 20px;
}