title: HTML div comment box with arrow
body: <p>I am trying to create a comment box with an arrow. I am using the CSS, but I have a problem that I cannot solve.</p>
  
  <p>I have a white background, and I need to make my comment box with a white background. So, to make the box visible to the users, I need to put a border to the box, but I don't know how to put the border to the arrow.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>body {background: grey;padding: 40px}
  
  .comment_div {
      background: white;
      width: 250px;
      padding: 10px;
      display: block;
  }
  
  .pointer {
      border: solid 20px transparent;
      border-right-color: #fff;
      position: absolute;
      margin: 40px 0 0 -38px;
      z-index: 999;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="pointer"&gt;&lt;/div&gt;
  &lt;div class="comment_div"&gt;
      test testtest testtest testtest testtest testtest testtest test
      test testtest testtest testtest testtest testtest testtest test
      test testtest testtest testtest testtest testtest testtest test
      test testtest testtest testtest testtest testtest testtest test
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/Zaukt/1157/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>How can I make a border to the box like below?</p>
  
  <p><img src="https://i.stack.imgur.com/zshp5.png" alt="Enter image description here"></p>