使用CSS创建具有动态高度的语音气泡

Question

我需要通过CSS获得一个看起来像这样的语音泡泡：

我不需要为框设置默认高度。它必须具有动态高度。如果高度增加，则左箭头必须位于中心。

我查看了一些例子，但我不知道如何改变高度！这是我的代码：

<style>
    .bubble
    {
    position: relative;
    width: 250px;
    height: 120px;
    padding: 0px;
    background: gray;
    margin-left:50px;
    }

    .bubble:after
    {
    content: "";
    position: absolute;
    top: 45px;
    left: -15px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent gray;
    display: block;
    width: 0;
    z-index: 1;
    }
</style>
<div class="bubble"></div>

Answer 1

这是JSBin

请

 top: 40%;
 bottom: 50%;

在CSS脚本

中的 .bubble：after 之后

您必须通过更改。气泡高度

来检查它