how to add border in an arrow before a div?

Question

I have this box with an arrow:

#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;
}

<div id=div1></div>

I want the arrow to have the same border as #div1 (1px solid #ccc) but it is white.

Any ideas how can I add a border color in the arrow?

JSFiddle

Answer 1

#div1 { 
 position: relative; 
 width: 140px;
 min-height:100px;
 max-height:400px;
 background: #fff; 
 color: #000;
 border:1px solid #ccc;
 z-index:3000;
 margin: 3rem;
}
#div1:before {
 content: "";
 vertical-align: middle;
 margin: auto;
 position: absolute;
 display: block;
 left: 0;
 right: 0;
 bottom: calc(100% - 6px);
 width: 12px;
 height: 12px;
 transform: rotate(45deg);
 border: 1px solid;
 border-color: #ccc transparent transparent #ccc;
 background-color: white;
}

<div id=div1></div>