通过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中阴影只有外边框阴影, 所以设置伪类两个边阴影,然后将其旋转,即可实现