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

版权声明：本文为博主原创文章，如需转载请务必注明原地址。 https://blog.csdn.net/qq_31393401/article/details/82427147

场景

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

思路

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

问题与解决思路

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

干货

.tag {
                        font-size: 22px;
                        background: #EF001E;
                        color: #fff;
                        line-height: 32px;
                        box-sizing: border-box;
                        height: 32px;
                        position: relative;
                        margin-left: 20px;
                        padding-left: 20px;
                        padding-right: 10px;
                        border: 1px solid transparent; // 解决安卓字体不居中问题

                        &::before {
                            content: '';
                            position: absolute;
                            left: -4px;
                            top: 50%;
                            transform: translate(0, -50%);
                            width: 0;
                            height: 0;
                            border-top: 20px solid transparent;
                            border-bottom: 20px solid transparent;
                            border-left: 12px solid #fff;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            right: -9px;
                            top: 50%;
                            transform: translate(0, -50%);
                            border-top: 16px solid transparent;
                            border-bottom: 16px solid transparent;
                            border-left: 8px solid #EF001E;
                        }

                        .tag-block {
                            content: '';
                            position: absolute;
                            right: -3px;
                            top: 50%;
                            transform: translate(0, -50%);
                            border-top: 16px solid transparent;
                            border-bottom: 16px solid transparent;
                            border-left: 4px solid #EF001E;
                        }
                    }

TIPS

1.具体边框的宽度和绝对定位的位置需要根据实际情况微调，建议做开几个手机测试~
2.代码中的px均做过响应式处理，会转换成rem（vw也可）