Как сделать границу с внутренним углом по тексту?

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 - это то, что вы просили?

Я сделал два дополнительных divs #arrow-r и #arrow-inner для треугольника, а затем выровненный текст с vertical-align так, чтобы стрелка была посередине.

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