想要的效果（图片）

利用css伪元素

demo1.gif

原理

两个三角形一样大，位置错开1~2px，第一个红色 第二个白色，第二个覆盖第一个

上代码

.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