箭头布局——有边框

需求：项目中箭头布局箭头部分要有边框

箭头.PNG

解决：在箭头部分颜色和边框颜色一致，在箭头内部在加一个箭头，颜色为背景颜色，相对于父箭头往下移

代码

css

  .arrow_box {
    width: 748px;
    position: relative;
    background: rgba(250, 250, 250, 1);
    border: 1px solid rgba(236, 238, 245, 1);
    opacity: 1;
    .arrow {
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent transparent rgba(236, 238, 245, 1) transparent;
      position: absolute;
      top: -20px;
      .arrow_inner {
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent rgba(250, 250, 250, 1) transparent;
        position: absolute;
        left: -10px;
        top: -8px;
      }
    }
  }

html

        <div class="arrow_box">
          <div class="arrow" style="left:210px">
            <div class="arrow_inner"></div>
          </div>
          <div>
            <more-stu ref="moreStu" @getStuListOne="getStuList"></more-stu>
          </div>
        </div>