How to make a tall teardrop shape in css

Question

In the image below there is a blue long teardrop above each rocket. I'm trying to figure out how to do that in CSS with border-radius.

Is this possible (with or without border-radius)?

Its the only way I thought of to get the rounded taper. Is there a better way? — Justin808, May 04 '18 at 06:32
Possible duplicate of [How do I create a teardrop in HTML?](https://stackoverflow.com/questions/30711203/how-do-i-create-a-teardrop-in-html) — Charles Shiller, May 04 '18 at 06:33

Vucko · Answer 1 · 2018-05-04T07:12:04.337

My 2 cents (but I believe it can be done in a better way), but with this way you can modify the line height for every rocket. Basically the top part is a long triangle, and the bottom part is a circle:

.teardrop {
  position: relative;
}

.line {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 150px 5px; /* 150px is the line height */
  border-color: transparent transparent #007bff transparent;
}

.teardrop::after {
  content: '';
  position: absolute;
  bottom: -5px;
  background-color: #007bff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

<div class="teardrop">
  <div class="line"></div>
</div>

Using only one div:

.teardrop {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 150px 5px; /* 150px is the line height */
  border-color: transparent transparent #007bff transparent;
}

.teardrop::after {
  content: '';
  position: absolute;
  bottom: -155px; /* 150 + height/2 */
  right: -5px; /* width/2 */
  background-color: #007bff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

<div class="teardrop"></div>

This is great. The only thing that would make it better is if the height could be based on the height of `.teardrop`. Would that be possible? — Justin808, May 04 '18 at 06:47
@Justin808 [here's a solution using only one `div`](https://jsfiddle.net/e5mnj0a1/1). — Vucko, May 04 '18 at 07:09

How to make a tall teardrop shape in css

1 Answers1