탐색 경로 모양을 만드는 방법

Question

한쪽 끝의 점과 다른 쪽 끝의 꼬리가있는 화살표 모양으로 탐색 경로를 만들려고했습니다.

기본적으로 레이아웃은 다음과 같습니다. [tail] [body] [point], 꼬리 & 지점은 삼각형입니다.

나는 [body] [point]를 CSS를 사용하여 만들 수 있었지만, 나는 꼬리를 만들려고 노력했습니다. 이 또한 CSS로 할 수 있습니까?

DEMO : https://plnkr.co/edit/mQELiNgVCe6ZoTepCtr9?p=preview

html로 :

<div style="font-size:0"> 
    <div class="arrow-tail"></div> 
    <div class="arrow-body">HELLO WORLD!</div> 
    <div class="arrow-point"></div> 
</div> 

CSS의 :

이

.arrow-point { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 15px solid #777777; 
} 
.arrow-body { 
    font-family: verdana; 
    font-size:15px; 
    display: inline-block; 
    background-color: #777777; 
    color:white; 
    padding:2px 6px 2px 16px; 
    height:20px; 
    vertical-align:top; 
} 
.arrow-tail { 
    float:left; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 15px solid #EEEEEE; 
} 

Answer 1

그 어려운 약간은 최종 결과가 정보를 기반으로 같이하는 방법을 이해하기 당신은 원래의 게시물에 제공했습니다. 하지만 몇 가지 추측을하고 난 당신이 같이 할 것을 믿습니다

당신은 position: absolute에 꼬리를 설정하여이를 달성 할 수있다.

꼬리의 최종 CSS이 될 것이다 :

이

.arrow-tail { 
    position: absolute; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 15px solid #fff; 
} 

은 또한 당신이 당신의 꼬리 주위에 이동하려는 경우 top:, right:는, bottom:는, left: 속성이 다음 확인할 필요가 있습니다 그 container div는 position: relative으로 설정됩니다.