使用顶部三角形为div添加边框

Question

我正在尝试使用顶部三角形为div添加边框

问题是边框没有应用于三角形部分

body {
  background-color: #F3F5F6;
}
.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #FFFFFF;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

<div class="info-panel">
  Testing
</div>

我不想添加一个css框阴影.

我需要一个边框.

---

的jsfiddle

Answer 1

实际上"三角形部分"本身就是一个边框,这就是为什么你不能对它应用CSS边框,但是有一个解决方法.

使用:before伪元素创建另一个大于第一个的三角形并将边框颜色应用于它.

.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:before, .info-panel:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
}
.info-panel:before {
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: #ddd;
}
.info-panel:after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #fff;
}

<div class="info-panel">
  Testing
</div>