ブレッドクラムの作成方法

Question

ブレッドクラムを一方の端にポイント、もう一方の端に尾を持つ矢印の形で作成しようとしました。

基本的に、レイアウトは[tail] [body] [point]です。ここでtail &ポイントはちょうど三角形です。

私は[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; 
} 

はまた、あなたがいることを確認する必要がありleft:属性、bottom:、right:、あなたがtop:とあなたの尾の周りに移動する場合に注意コンテナdivはposition: relativeに設定されます。