Happy Happy - 12 days ago 5
CSS Question

div with triangular arrow

I am using bootstrap and wish to give triangular pointer to div just like below

enter image description here

I have tried some code see below

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


But arrow is going somewhere else.

Here is Fiddle

Also is it possible to increase width of div when i hover over the div?

Answer

Try this:

.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: '';
}

or if you want more browser support instead of transform:translateX(-50%) you can use a negative margin-left