codescribblr
4/2/2014 - 3:57 PM

This css allows you to create an arrow off of a box element to give it the chat bubble effect.

This css allows you to create an arrow off of a box element to give it the chat bubble effect.

box_arrow.css
content_copyfile_download
.dropdown-menu {
    top:90px;
    left:30px;
    padding:10px;
    background-color: #ebebeb;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
}
.dropdown-menu:before {
    content: ' ';
    height:0;
    position:absolute;
    width:0;
    border: 12px solid transparent;
    border-bottom-color: #c4c4c4;
    left: 20px;
    top:-25px;
}
.dropdown-menu:after {
    content: ' ';
    height:0;
    position:absolute;
    width:0;
    border: 12px solid transparent;
    border-bottom-color: #ebebeb;
    left: 20px;
    top:-24px;
}