css: inset shadow around of an arrow - html

Question

I design an arrow top of an ul box menu like this picture:
You can see, I set a border around of box:
border: .1rem solid rgba(228,234,248,.5);
but Is there a way to set a border around of arrow?
.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

Well, no ways to set a border around the arrow as the triangle you made is itself a border. But there's a solution, you can overlay the triangles on each other like, this will give you a border effect around your triangle.
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>