.bubble {
    position: relative;
    border: 2px solid black;
    background-color: white;
    display: inline-block;
    border-radius: 6px;
    padding: 10px;
    margin: 20px;
}
.bubble:after, .bubble:before {
    position: absolute;
    content: "";
    border: solid transparent;
}
.bubble:after {
    border-width: 5px;
}
.bubble:before {
    border-width: 8px;
}

/* top */
.top.bubble:after, .top.bubble:before {
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
}
.top.bubble:after {
    border-bottom-color: white;
}
.top.bubble:before {
    border-bottom-color: black;
}

/* down */
.down.bubble:after, .down.bubble:before {
    top: 100%;
    right: 50%;
    transform: translateX(50%);
}
.down.bubble:after {
    border-top-color: white;
}
.down.bubble:before {
    border-top-color: black;
}

/* left */
.left.bubble:after, .left.bubble:before {
    right: 100%;
    bottom: 50%;
    transform: translateY(50%);
}
.left.bubble:after {
    border-right-color: white;
}
.left.bubble:before {
    border-right-color: black;
}

/* right */
.right.bubble:after, .right.bubble:before {
    left: 100%;
    bottom: 50%;
    transform: translateY(50%);
}
.right.bubble:after {
    border-left-color: white;
}
.right.bubble:before {
    border-left-color: black;
}