如何创建面包屑形状

Question

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

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

我设法使用 css 创建了 [body][point]，但我一直在尝试让尾巴发挥作用。这也可以用 css 来完成吗？

演示：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

根据您在原始 post 中提供的信息，有点难以理解您希望最终结果是什么样子。但我做了一些猜测，我相信你希望它看起来像这样：

您可以通过将尾部设置为 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。

如何创建面包屑形状

How to create breadcrumb shape

html

css

breadcrumbs