仅限 CSS - 带有顶向箭头的工具提示

Question

我正在尝试创建以下工具提示(不是其中的内容 - 只是框和箭头):

我在让箭头与主框正确融合时遇到问题。

我创建了一个 Fiddle here使用我目前拥有的代码。

您会注意到箭头看起来不错，但不是 100% 适合，我不确定如何完成它。

下面是箭头代码:

.arrow_box:after, .arrow_box:before {
    border: 11px solid;
    border-color: inherit;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    position: absolute;
    content: '';
    left: 90%;
    bottom: 100%;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #f3f3f3;
    border-width: 13px;
    margin-left: -23px;
}

.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #e1e1e1;
    border-width: 15px;
    margin-left: -25px;
}

Answer 1

http://jsfiddle.net/9uppsLqa/5/

.arrow_box {
    border-radius: .1875em;
    z-index: 99;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
    background-repeat: repeat-x;
    background-position: 0 0;
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
    background-color: #e1e1e1;
    margin-top: 3em;
    margin-left: .75em;
    margin-right: .75em;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-top: 0;
    width: 340px;
    height: 160px;
}
.arrow_box:after, .arrow_box:before {
    border: 13px solid transparent;
    position: absolute;
    content: '';
    left: 90%;
    bottom:100%;
}

.arrow_box:after {
    border-bottom-color: #fafafa;
    border-width: 14px;
    margin-left: -24px;
}

.arrow_box:before {
    border-bottom-color: #999;
    border-width: 15px;
    margin-left: -25px;
}