css文件,在长方形提示框的div上添加after和before样式
.r-note:before {
content:"";
width: 0;
height: 0;
border-style:solid;
border-width:10px;
border-color: transparent rgba(102,102,102,0.3) transparent
transparent;
position: fixed;
margin-top: 15px;
margin-left: -20px;
}
.r-note:after {
content:"";
width: 0;
height: 0;
border-style:solid;
border-width:10px;
border-color: transparent #fff transparent transparent;
position: fixed;
margin-top: -116px;
margin-left: -19px;
}
before和after都是实现三角形,两个三角形不完全重合,画出三角。
方向由border-color确定