如何在文字上制作一个内角的边框？

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-inner三角形，然后与vertical-align对齐的文本，使箭头在中间。

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