title: How to make arrows on both sides of a box using css
body: <p>I want to make a rectangle with arrows on both sides.
  I have the jsfiddle <a href="http://jsfiddle.net/7wegxh4v/" rel="nofollow">http://jsfiddle.net/7wegxh4v/</a> .
  Here is my css</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="arrowbox"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  
  
  #arrowbox
  {
      width: 200px;
      height: 50px;
      background-color:green;
      margin-left:100px;
      margin-top:100px;
  }
  </code></pre>
  
  <p>It now shows a green rectangle. I want to add two equilateral triangle triangles of green color at both ends. How can I do that using css? Any idea?</p>