如何在div之前的箭頭中添加邊框？

Question

我有這個盒子中的箭頭

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

我想箭頭具有相同的邊框爲#div1（1px solid #ccc），但它是白色的。

任何想法如何在箭頭中添加邊框顏色？

JSFiddle

Answer 1

我修改你的代碼了一點，但我想我已經得到了你想要的輸出

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>