title: Triangle with CSS with border
body: <p>Firstly here's the fiddle: <a href="http://jsfiddle.net/krish7878/kuG6X/3/" rel="nofollow">http://jsfiddle.net/krish7878/kuG6X/3/</a></p>
  
  <p>I need a css triangle with just a border for a text bubble, the background should be transparent. </p>
  
  <p>Code: </p>
  
  <p>HTML:<code>&lt;div class="arrow-up"&gt; &lt;/div&gt;</code></p>
  
  <p>CSS:</p>
  
  <pre><code>.arrow-up {
    position:absolute;
    top:50px;
    left:5px;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 42px solid transparent;
    border-top: 42px solid black;
    margin: 10px; 
    -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);
  }
  </code></pre>