css画三角形和提示框

想要的效果（图片）

利用css伪元素

demo1.gif

原理

两个三角形一样大，位置错开1~2px，第一个红色 第二个白色，第二个覆盖第一个
三角形画法，不多说，利用border 和 transparent

上代码

.a::before {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent red transparent;
    position: absolute;
    top: -4px;
    left: 38px;
  }
  .a::after {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    top: -3px;
    left: 38px;
    position: absolute;
  }
  .a {
    position: relative;
    position: relative;
    display: inline-block;
    border: 1px solid red;
    width: 80px;
    height: 20px;
    text-align: center;
  }

12