Css实现带阴影的箭头框

通过html + css实现带阴影的三角箭头框，如下：

html
<div id="tips"></div>

css

#tips{
    position: relative;
    width: 165px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 12px 18px;
}
#tips:before {
    position: absolute;
    top: -10px;
    left: 72px;
    content: '';
    width: 0;
    border: 10px solid;
    border-color: #FFFFFF;
    transform: rotate(-45deg);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

通过before伪类增加三角尖尖， 但是css中阴影只有外边框阴影， 所以设置伪类两个边阴影，然后将其旋转，即可实现