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;
  }

用了兩個層覆蓋,不同的顏色讓其變得有邊框