css实现聊天气泡

<div class="bubble">热</div>

    .bubble {
        position: absolute;
        top: -15px;
        right: -15px;
        width: 22px;
        height: 15px;
        line-height: 15px;
        font-size: 1px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        background-image:linear-gradient(to top,#FF2900,#FF923F);
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 4px;
    }

    .bubble:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        left: 5px;
        bottom: -6px;
        border-left: 3px solid transparent;
        border-top: 6px solid #FF2900;
        border-right: 3px solid transparent;
    }