How to create breadcrumb shape - html

Question

I've been trying to create a breadcrumb in the shape of an arrow that has a point on one end and a tail at the other.
Basically, the layout is: [tail][body][point], where tail & point are just triangles.
I managed to create [body][point] using css, but i'm stuck trying to make the tail to work. Can this also be done with css?
DEMO: https://plnkr.co/edit/mQELiNgVCe6ZoTepCtr9?p=preview
The HTML:
<div style="font-size:0">
<div class="arrow-tail"></div>
<div class="arrow-body">HELLO WORLD!</div>
<div class="arrow-point"></div>
</div>
The 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

Its a bit difficult to understand how you want the final result to look like based on the information you provided in the original post. But I make some guesses and I believe that you want it to look like this:
You can achieve this by setting the tail to position: absolute.
The final CSS of the tail would be this:
.arrow-tail {
position: absolute;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 15px solid #fff;
}
Also note that if you want to move around your tail with the top:, right:, bottom:, left: attributes then you need to make sure that the container div is set to position: relative.