css - 使用 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%;

在你的.bubble:after在 CSS 脚本中

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