如何在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>