how can i get this arrow to face upward instead of left?

[Glenskie]

this codes displays the arrow facing left i need it to display up...

<div class="chat-bubble">
test
  <div class="arrow-border"></div>
  <div class="arrow"></div>
</div>

 

.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}
.arrow-border {
  border-color:transparent #fff  transparent  transparent;
border-style: solid;
border-width: 19px;
height:0;
width:0;
position:absolute;
left:18px;
top: -10px;
}
.arrow {
border-color:transparent #FFF transparent transparent;
border-style: solid;
border-width: 17px;
height:0;
width:0;
position:absolute;
left: 5px;
top: -7px;

THANKS