如何使用CSS创建气泡？

Question

我想将三角形​​添加到HTML元素（例如，添加到<div>元素中）。我知道以三角形/矩形看起来像某种房屋的方式添加三角形很容易。 And that there a many generators for。

我试图实现的目的是以看起来像气泡的方式添加三角形。或像地图上的图钉一样。可以仅使用CSS做到这一点吗？

Answer 1

.speech-bubble {
    position: relative;
    background: #00aabb;
    border-radius: .4em;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #00aabb;
    border-bottom: 0;
    border-left: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}