css 实现文字泡

使用伪元素的方法，生成一个直角三角形，再用绝对定位，将其放到合适的位置。

header .header-top-content div {
    background-color: rgba(255,255,255,0.25);
    padding: 0.1rem 0.12rem 0.1rem 0.34rem;
    min-height: 1rem;
    color: rgba(255,255,255,0.8);
    line-height: 0.34rem;
    font-size: 0.24rem;
    margin-left: 0.4rem;
    width: 100%;
    position: relative;
    border-radius: 0.1rem;
    margin-bottom: 0.62rem;
}

header .header-top-content div::before {
    content: "";
    width: 0px;
    height: 0px;
    border: 0.1rem solid transparent;
    position: absolute;
    top: 0.1rem;
    left: -0.2rem;
    border-right: 0.1rem solid rgba(255,255,255,0.25);
    border-top: 0.1rem solid rgba(255,255,255,0.25);
}

效果：

附加：指定元素可编辑的属性

属性：contenteditable="true"

用处：用div代替textarea实现不换行的文字输入