테두리

Question

내가 만 HTML/CSS에 다음과 같은 이미지를 생성해야합니다 (오른쪽 가리키는)와 삼각형/화살표 모양 만드는 방법 :

내가 테스트를 봤는데을 나는 수있었습니다 오히려 그 쪽이 (당신이 바이올린 링크에서 볼 수 있습니다) 화살표가 오른쪽 상자를 생성하지만, 화살표가 맨 위에합니다 :

http://jsfiddle.net/130mko3w/

에있는 화살표를 가하고 코드를 상단이 같습니다에 다음과 같습니다 :

.arrow_box:after, .arrow_box:before { 
    border: 13px solid transparent; 
    position: absolute; 
    content: ''; 
    left: 90%; 
    bottom:100%; 
} 

.arrow_box:after { 
    border-bottom-color: #fafafa; 
    border-width: 14px; 
    margin-left: -24px; 
} 

.arrow_box:before { 
    border-bottom-color: #999; 
    border-width: 15px; 
    margin-left: -25px; 
} 

누군가가 나를 오른쪽 화살표 이동으로 도울 수 있습니까? 참고 : Border-bottom-color를 border-right-color로 변경하면 화살표가 옆으로 이동하지만 삼각형이 잘못된 방향을 가리키고 있음을 발견했습니다.

Answer 1

jsFiddle demo

모든 당신이 당신을 위해 작동합니다

.arrow_box:after, .arrow_box:before { /* both border styles */ 
    border: 14px solid transparent; 
    border-left-color: #f2f2f2; 
    position: absolute; 
    content: ''; 
    left: 100%; 
    top: 15px; 
} 
.arrow_box:before {    /* alter only for :before pseudo element */ 
    border-left-color: #aaa; 
    border-width: 16px; 
    margin-top: -2px; 
} 

Answer 2

필요

http://jsfiddle.net/130mko3w/

.arrow_box:after, .arrow_box:before { 
border: 13px solid transparent; 
position: absolute; 
content: ''; 
left: 107%; 
bottom: 60%; 
} 
.arrow_box:after { 
border-left-color: #eee; 
border-width: 14px; 
margin-left: -24px; 
} 
.arrow_box:before { 
border-left-color: #aaa; 
border-width: 16px; 
margin-left: -24px; 
top: 34px; 
}