带三角箭头的 div

Question

我正在使用引导程序并希望像下面一样将三角形指针指向 div

我已经尝试了一些代码，见下文

<div>This is just test</div>
<div class="tip">Testing div 12455555553ssssssssaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

但是箭头会去别的地方。

这里是Fiddle

当我将鼠标悬停在 div 上时，是否可以增加 div 的宽度？

Answer 1

试试这个：

.tip:before {
    position: absolute;
    display: inline-block;
    width:0;
    height:0;
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    left: 50%;
    transform:translateX(-50%);
    z-index: 1;
    top: -7px;
    content: '';
}

.tip:after {
    position: absolute;
    display: inline-block;
    width:0;
    height:0;
    border-bottom: 6px solid #eee;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    left: 50%;
    transform:translateX(-50%);
    z-index: 2;
    top: -6px;
    content: '';
}

或者如果你想要更多的浏览器支持而不是transform:translateX(-50%)，你可以使用否定的margin-left