如何创建面包屑形状

Question

我一直试图创建一个箭头形状的面包屑，一端有一个点，另一端有尾部。

基本上，布局是：[tail] [body] [point]，其中tail＆amp;点只是三角形。

我设法用css创建[body] [point]，但是我试图让尾巴工作。这也可以用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:属性移动您的尾巴，那么您需要确保容器div设置为position: relative。