Speechbubble提示 - 如何移動

Question

嘿我創造了這個小對話氣泡提示，其中箭頭是底部的箭頭：

http://jsfiddle.net/QNPYQ/

.bubble:after { 
    border-color: #EEEEEE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 
    border-style: solid; 
    border-width: 26px; 
    bottom: -52px; 
    content: ""; 
    display: block; 
    height: 0; 
    left: 4em; 
    position: absolute; 
    width: 0; 
} 

任何人能告訴我怎麼做<div>頂部的箭頭？

Answer 1

你可以按照上面

.bubble:after { 
    border-color: #EEEEEE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 
    border-style: solid; 
    border-width: 26px; 
    top: -52px; 
    content: ""; 
    display: block; 
    height: 0; 
    left: 4em; 
    position: absolute; 
    width: 0; 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

一個例子旋轉的箭頭，並把它放在：http://jsfiddle.net/QNPYQ/1/

Answer 2

http://jsfiddle.net/a2ZFF/

您需要更改邊框顏色爲指向的箭頭其他方式，而且在渲染邊界之前：而不是：之後（儘管這不是絕對必要的）也是有意義的。

.bubble:before { 
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #EEEEEE; 
    border-style: solid; 
    border-width: 26px; 
    content: ""; 
    top:-53px; 
    display: block; 
    height: 0; 
    left: 4em; 
    position: absolute; 
    width: 0; 
} 

爲了使整個事情合適，你需要添加一個頂部邊緣的整個事情，或一些類似的調整。