Edit in JSFiddle

<div class="speech-bubble speech-bubble-bottom">
    <p>Hi there.Hi there.Hi there.Hi there.Hi there.Hi there.</p></div>

.speech-bubble {
    position: relative;
    background-color: #292929;
    width: 200px;
    height: 150px;
    /* 垂直居中 */
    color: white;
    text-align: center;
    border-radius: 10px;
    font-family: sans-serif;
    display: table;
}
.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}
.speech-bubble:after {
    content:'';
    position: absolute;
    width: 0;
    height: 0;
    border: 15px solid;
}
/* 箭头的位置 */
 .speech-bubble-top:after {
    border-bottom-color: #292929;
    left: 50%;
    bottom: 100%;
    margin-left: -15px;
}
.speech-bubble-right:after {
    border-left-color: #292929;
    left: 100%;
    top: 50%;
    margin-top: -15px;
}
.speech-bubble-bottom:after {
    border-top-color: #292929;
    top: 100%;
    left: 50%;
    margin-left: -15px;
}
.speech-bubble-left:after {
    border-right-color: #292929;
    top: 50%;
    right: 100%;
    margin-top: -15px;
}