如何在文本上创建一个向内角度的边框？

Question

我无法弄清楚如何在文本元素上制作有角度的边框。我希望它看起来像这样：

有什么想法吗？我试过使用CSS技巧三角形的提示，但没有任何运气。有什么想法吗？

Answer 1

http://jsfiddle.net/6JBef/

我创建了一个html结构，也许这个帮助。

<强> HTML：

<div id="log2">
    <span class="arrow-up" style="" ></span>
    <br/>How are u?<br/>Whats the matter? :D
</div>

<强> CSS：

#log2 {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 300px;
    padding: 10px;
    margin: 15px auto 0;
    position: relative;
    background: #fff;
}
#log2:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px 1px 0 0;
    width: 15px;
    height: 15px;
    top: 19px;
    right: -9px;
    background: inherit;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Answer 2

我不太确定，看到jsfiddle - 这就是你要求的吗？

我为三角形添加了两个div #arrow-r和#arrow-inner，然后将文本与vertical-align对齐，以便箭头位于中间。

http://jsfiddle.net/LfErj/1/