这种不等高度内容的气泡效果怎么做

---

拿去玩～说爱我～～PS：代码略多因为考虑重用～

HTML

<div id="message_list">
    <ul>
        <li>
            <span class="icon yellow">speaker_notes</span>为消费者发现值得信赖的商家，让<a class="red">消费者</a>享受超低折扣的<strong>优质服务</strong>。【每天多单团购】，为商家找到合适的消费者，给商家提供优质的互联网技术服务。</a>
            <!-- <div class="ctrl">
                <span class="icon">chat</span>
                <span class="icon">offline_pin</span>
            </div> -->
        </li>
        <li class="right">
            <div>
                <span class="icon">face</span>我的“代客消费”怎么不能用了？是不是限量了？
            </div>
        </li>
        <li class="left">
            <div>
                <span class="icon">person</span>该;
            </div>
        </li>
        <li class="sp">2016年12月15日 23:11:33</li>
        <li class="right">
            <div>
                <span class="icon">face</span>你瞅啥？
            </div>
        </li>
        <li class="left">
            <div>
                <span class="icon">person</span>瞅你咋滴？
            </div>
        </li>
    </ul>
    <form action="">
        <div class="panel flex" id="input">
            <label class="flex4">
                <input type="text" class="block">
            </label>
            <label class="flex">
                <input type="submit" class="btn mint small" value="发送">
            </label>
        </div>
    </form>
</div>
    
    
    

LESS

#message_list {
    background-color: @white;
    padding: 0.5rem 0.5rem 2.75rem;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    li {
        display: block;
        margin: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: @flat;
        font-size: 0.8rem;
        color: @dark;
        position: relative;
        line-height: 1.25rem;
        min-height: 2rem;
        .radius;
        &.sp {
            padding: 0;
            background-color: transparent;
            text-align: center;
            font-size: 0.6rem;
            min-height: auto;
        }
        &.left, &.right {
            color: @white;
            &:after {
                width: 0;
                height: 0;
                border-style: solid;
                display: block;
                content: '';
                position: absolute;
                top: 0.5rem;
            }
            .icon {
                width: 2rem;
                height: 2rem;
                line-height: 2rem;
                font-size: 1.5rem;
                text-align: center;
                .fl;
            }
        }
        &.right {
            margin-left: 2rem;
            background-color: @sky;
            &:after {
                border-width: 0.5rem 0 0.5rem 0.75rem;
                border-color: transparent transparent transparent @sky;
                right: -.5rem;
            }
            .icon {
                margin: 0 0.25rem 0 -.5rem;
            }
        }
        &.left {
            color: @dark;
            margin-right: 2rem;
            background-color: @flat;
            &:after {
                border-width: 0.5rem 0.75rem 0.5rem 0;
                border-color: transparent @flat transparent transparent;
                left: -.5rem;
            }
            .icon {
                margin: 0 0.25rem 0 -.5rem;
            }
        }
    }
    a {
        font-size: 0.8rem;
    }
    .icon {
        margin: 0 0.25rem;
        .color;
    }
    .ctrl {
        margin-top: 0.5rem;
        padding: 0.5rem 0 0;
        border-top: 1px dotted @flatd;
        .clear;
        span.icon {
            display: inline-block;
            font-size: 1.25rem;
            .fr;
        }
    }
.panel {
    padding: 0 .5rem;
    background-color: @white;
    margin-bottom: .5rem;
    .header {
        font-size: .8rem;
        padding: 1rem 0 .75rem;
        border-bottom: 1px dotted @flat;
        .clear;
        &>span {
            color: @darkd;
            padding-left: .5rem;
            line-height: 1rem;
            display: block;
            border-left: .15rem solid @mint;
            .fl;
        }
        &.yellow>span {
            border-left: .15rem solid @yellow;
        }
        a.more {
            .fr;
            .icon {
                position: relative;
                top:.1rem;
            }
        }
        .code_status{
            margin-left:.5rem;
            .icon {
                position: relative;
                top:.1rem;
            }
        }
    }
}

}

---

你没发现不管一行还是两行……箭头的高度是固定的吗

---

就是一个不定高度的div啊，高度会随着content增加而增加，右边的triangle做法也很多，通常个人的比较常用的就是before+after咯。codepen的demo

---

CSS 利用 border 实现的

参考：
用纯CSS实现的箭头