css：箭头周围的阴影

Question

我设计了一个ul盒子菜单的箭头顶部，如下图所示：

你可以看到，我在框周围设置了一个边框：

border: .1rem solid rgba(228,234,248,.5);

但有没有办法在箭头周围设置边框？

.mega-dropdown-menu:before {
    content: "";
    border-bottom: 8px solid #fbfbfb;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    position: absolute;
    top: -7px;
    left: 13.1rem;
    z-index: 10;
}

Answer 1

好吧，没有办法在箭头周围设置边框，因为你制作的三角形本身就是一个边框。但是有一个解决方案，你可以将三角形叠加在一起，就像这样，你会在三角形周围产生border效果。

div {
  position: relative; 
  /* make sure you use this else your elements will fly in the wild */
}

div:before {
  content: "";
  border-bottom: 10px solid #aaa;
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
  position: absolute;
  left: -2px;
  top: -2px;
}

div:after {
  content: "";
  border-bottom: 8px solid #ddd;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  position: absolute;
}

<div></div>