텍스트의 안쪽 각도로 경계를 만드는 방법은 무엇입니까?

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/