展示一个头部有三角形的遮罩层提示框

    <div class="img_div" v-for="item in Object.keys(statusList)" :key="item">
        <a href="#">
          <img :src="require(`../../assets/img/${item}.png`)" v-show="!statusList[item]">
          <img :src="require(`../../assets/img/${item}yc.png`)" v-show="statusList[item]">
          <div class="mask">
            <div>{{statusNames[item]}}</div>
            <div class="maskinner">
              <div v-show="!statusList[item]">
                <i style="width:5px;height:5px;border-radius:50%;background-color:#00FF00;display: inline-block; margin-right: 2px"></i>状态:正常
              </div>
              <div v-show="statusList[item]">
                <i style="width:5px;height:5px;border-radius:50%;background-color:red;display: inline-block; margin-right: 2px"></i>状态:异常
              </div>
            </div>
          </div>
        </a>
      </div>




//css
.img_div {
  display: inline-block;
  position: relative;
}
 .img_div img:hover{
      transform: scale(1.4);
  }
.mask h3 {
  text-align: center;
}
.img_div a:hover .mask {
  opacity: 1;
}
.mask:before,
.tipbox:after {
  content: '';
  position: absolute;
  border-style: dashed dashed solid dashed;
  line-height: 1;
  display: inline-block;
}
.mask:after {
  left: 20px;
  border-color: transparent transparent #d7dadb;
  border-width: 11px;
  top: -22px;
  z-index: 1080;
}
.mask:before {
  left: 20px;
  border-color: transparent transparent rgba(6, 21, 50, 1);
  border-width: 10px;
  top: -19px;
  z-index: 1081;
}
.mask {
  position: absolute;
  top: 55px;
  left: 15px;
  width: 85px;
  height: 45px;
  // background: rgba(101, 101, 101, 1);
  background: rgba(6, 21, 50, 1);
  color: #ffffff;
  opacity: 0;
  font-size: 14px;
  /* border: 1px solid #D7DADB; */
  display: block;
  padding: 5px;
  border-radius: 2px;
  z-index: 9999;
}
.maskinner {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}