如何在css中制作高大的泪珠形状

Question

在下面的图片中，每个火箭上方都有一个蓝色的长泪珠。我正在尝试用border-radius找出如何在CSS中做到这一点。

这是否可行（有无border-radius）？

Answer 1

我的2美分（但我相信它可以以更好的方式完成），但是通过这种方式你可以修改每一枚火箭的height行。基本上顶部是长三角形，底部是圆形：

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

只使用一个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>