div 带三角箭头

Question

我正在使用 bootstrap 并希望将三角形指针指向 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

div 带三角箭头

div with triangular arrow

html

css

twitter-bootstrap

css-shapes