title: how to add border in an arrow before a div?
body: <p>I have this box with an arrow:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
    position: fixed;
    width: 140px;
    min-height: 100px;
    max-height: 400px;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    //border-top:none;
    z-index: 3000;
  }
  #div1:before {
    content: "";
    vertical-align: middle;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=div1&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
    </p>
  
  <p>I want the arrow to have the same border as <code>#div1</code> (<code>1px solid #ccc</code>) but it is white.</p>
  
  <p>Any ideas how can I add a border color in the arrow?</p>
  
  <p><a href="https://jsfiddle.net/xzqbans2/" rel="nofollow">JSFiddle</a></p>