css三角形

最终的效果图

贴上代码

html部分

<!--确认删除提示窗-->
    <div class="deleHint">
      <div class="warpper">
        <p class="content">确认删除这条地址？</p>
        <div class="btn">
          <button class="confirm">确认</button>
          <button class="cancel">取消</button>
        </div>
      </div>
      <div class="caret caretTop"></div>
      <div class="caret caretSec"></div>
    </div>

css部分:

/*三角形*/
  .caret {
    width: 0;
    height: 0;
    border-top: 8px solid #ccc;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    position:absolute;
    left:50px;
  }
  .caretTop{
    top:76px;
  }
  .caretSec{
    top:74px;
    border-top: 8px solid #fff;
  }

用了两个层覆盖,不同的颜色让其变得有边框