title: Creating a box with a arrow CSS3 Issue
body: <p>I am trying to create an arrow <code>10px by 10px</code> on the right hand side of my bubble but I cannot see it.  So far I have:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.pageHelp{
      float:right;
      margin:10px 20px 0 0;
      width:85px;
      height:25px;
      background-color:#354E69;
      border-radius:3px;
  }
  .pageHelp:before{
      content:"";
      position:absolute;
      right:100%;
      top:26px;
      width:0;
      height:0;
      border-top:13px solid transparent;
      border-right:26px solid #354E69;
      border-top:13px solid transparent;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="pageHelp"&gt;&lt;p&gt;In Page Help&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Luis:</strong></p>
  
  <pre><code>.pageHelp{
      float:right;
      margin:10px 20px 0 0;
      width:85px;
      height:25px;
      background-color:#354E69;
      border-radius:3px;
      position: relative;
  }
  .pageHelp:after, .pageHelp:before {
      left: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }
  .pageHelp:after {
      border-left-color: #354E69;
      border-width: 10px;
      top: 50%;
      margin-top: -10px;
  }
  .pageHelp:before {
      border-left-color: ##354E69;
      border-width: 16px;
      top: 50%;
      margin-top: -16px;
  }
  </code></pre>