如何将箭头位置更改为框的顶部？

Question

我发现这很酷JSFiddle example。然而箭头正对着底部。

你怎么能调整代码，使箭头在上面？

我尝试以下，但没有更迭：

/* for firefox, safari, chrome, etc. */ 
-webkit-transform: rotate(-180deg); 
-moz-transform: rotate(-180deg); 
/* for ie */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6); 

Answer 1

的更新：

.bubbleouter:after { 
    top:-13px; /* value = - border-top-width - border-bottom-width */ 
    border-width:0 18px 14px; /* vary these values to change the angle of the vertex */ 
} 

.bubbleinner:after { 
    top:-13px; /* value = - border-top-width - border-bottom-width */ 
    border-width:0 16px 12px; /* vary these values to change the angle of the vertex */ 
} 

演示：http://jsfiddle.net/sDBHy/

Answer 2

CSS：

.bubbleouter:after { 
     content:""; 
     display:block; /* reduce the damage in FF3.0 */ 
     position:absolute; 
     bottom:50px; /* value = - border-top-width - border-bottom-width */ 
     left:50%; /* controls horizontal position */ 
      margin:0 0 0 -18px; 
     width:0; 
     height:0; 
      z-index:99; 
     border-width:0px 18px 14px; /* vary these values to change the angle of the vertex */ 
     border-style:solid; 
     border-color:#222222 transparent; 
    } 


    .bubbleinner:after { 
     content:""; 
     display:block; /* reduce the damage in FF3.0 */ 
     position:absolute; 
     bottom:45px; /* value = - border-top-width - border-bottom-width */ 
     left:50%; /* controls horizontal position */ 
      margin:0 0 0 -16px; 
     width:0; 
     height:0; 
      z-index:99; 
     border-width:0px 16px 12px; /* vary these values to change the angle of the vertex */ 
     border-style:solid; 
     border-color:#444444 transparent; 
    } 

这里是你的例子：http://jsfiddle.net/4Gs3W/130/ 只是改变渐变风格:)