CSS3 라벨 태그 권리를 직면와 위치를 사용하거나 : 나는 CSS에서이 형태를 구축하려고

Question

후 : 내가

하지만 삼각형 모양을 넣어하는 방법을 알아낼 수 없습니다 (고려가 태그의 "몸체"및 팁의 삼각형에 대한 사각형) 오른쪽을 향하게합니다. 직위로 작업하고 있기 때문에, 사각형이 직사각형 바로 뒤에 나타나도록하려면 어떻게해야합니까? 태그의 크기가 모두 다를 수 있습니다. 나는 그것을 해결할 수 없다.

내가 만들고있는 것과 비슷한 태그로 http://jsfiddle.net/ExZFe/을 확인할 수 있습니다. 이 예제에서는 위치 만 사용하므로 삼각형을 고정 된 위치에 지정하는 것은 쓸모가 없습니다. 나는 다음과 같이 노력했다. 같은 이유 때문에 후에 붙었다. 내가 뭘 놓치고 있니? 미리 감사드립니다.

Answer 1

을 .tag하기 위해 라인 높이를 추가 왼쪽의 왼쪽에서의 직사각형을 볼 수 없으므로 여기서는 쓸모가 없습니다. http://jsfiddle.net/Gv3rf/

Answer 2

그냥있는 시작 (대신 left 단순히 (사각형의 오른쪽에서 시작)을 right 속성을 사용하여 삼각형의 위치를 ​​

.tag { 
line-height: 10px; 
/* the rest of your styles here */ 
} 

http://jsfiddle.net/ExZFe/3/