Question

我有一个带箭头的方框：

＆＃13;

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

＆＃13;

<div id=div1></div>

＆＃13;

我希望箭头与#div1（1px solid #ccc）具有相同的边框，但它是白色的。

任何想法如何在箭头中添加边框颜色？

JSFiddle

Answer 1

＆＃13;

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

＆＃13;

<div id=div1></div>

＆＃13;

Answer 2

我已经修改了一下你的代码，但我想我已经得到了你想要的输出

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>

如何在div之前在箭头中添加边框？

2 个答案: