css伪元素画三角形边框有细线

场景

页面需要展示一个标签，用图片的话其内的字数就限定死了，而字数过少观感就不好，所以尝试用css画出标签样式，如下图：

思路

在一个红色的div前后添加伪元素（::before和::after），利用边框画出，分别是白色和红色的三角形

问题与解决思路

画三角形的过程并不难，但遇到了很神奇的现象：左三角形左边缘有红色细线，右三角形左边缘有红色细线，
经修改div颜色发现，左细线是div的边缘，右细线是背景色，所以第一反应的解决思路就是增大::before伪元素大小遮住左侧细线（增大高度与宽度），新增一个红色块遮住右侧细线（因为若增大::after面积想不到好的解决溢出方案）

干货

.tag {
                        font-size: 22px;
                        background: #EF001E;
                        color: #fff;
                        line-height: 32px;