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; 
}