創建動態高度語音泡使用CSS

我需要得到一個講話泡沫是通過CSS看起來是這樣的：創建動態高度語音泡使用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>

來源

2013-08-02 user2632980

這裏是JSBin

讓

top: 40%; 
bottom: 50%;

在 .bubble

：在CSS腳本後

你必須檢查它改變。氣泡高度

來源

2013-08-02 07:30:23

創建動態高度語音泡使用CSS

回答

相關問題