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