Wie fügt man einen Rahmen in einen Pfeil vor einem div ein?

Question

Ich habe diese Box mit einem Pfeil:

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

ich den Pfeil wollen die gleiche Grenze wie #div1 (1px solid #ccc) haben, aber es ist weiß.

Irgendwelche Ideen wie kann ich eine Rahmenfarbe in den Pfeil hinzufügen?

JSFiddle

Answer 1

Ich habe Ihren Code ein wenig verändert, aber ich denke, ich habe Ihre gewünschte Ausgabe

FIDDLE

#div1 { 
 
    position: fixed; 
 
    width: 140px; 
 
    min-height: 100px; 
 
    max-height: 400px; 
 
    background: #fff; 
 
    color: #000; 
 
    border: 1px solid #ccc; 
 
} 
 
#div1:before { 
 
    content: ''; 
 
    vertical-align: middle; 
 
    margin: auto; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 93%; 
 
    width: 15px; 
 
    height: 15px; 
 
    background: #fff; 
 
    border-top: 1px solid #ccc; 
 
    border-right: 1px solid #ccc; 
 
    transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
}

<br> 
 
<div id="div1"></div>

Answer 2

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