css 画带边框的箭头的问题

Question

我想要用css画一个如下图的箭头，带边框

思路很简单，用一个带坐上下边框的长方形，拼一个灰色的三角形，然后在用一个白色的三角形遮挡掉灰色三角形的主题部分从而形成一个三角形的边框
以下是css实现

        .first-step {
            height: 23px;
            width: 80px;
            line-height: 23px;
            border-left: 1px solid #e5e5e5;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            display: inline-block;
            text-align: center;
            position: relative;
        }
        .first-step:after {
            width: 0;
            height: 0;
            content: '';
            border-left: 14px solid #e5e5e5;
            /*border-right: 14px solid transparent;*/
            border-top: 12.5px solid transparent;
            border-bottom: 12.5px solid transparent;
            position: absolute;
            right: -14px;
            top: -1px;
            z-index: 2;
        }
        .first-step:before {
            width: 0;
            height: 0;
            content: '';
            border-left: 14px solid white;
            border-top: 12.5px solid transparent;
            border-bottom: 12.5px solid transparent;
            position: absolute;
            right: -12px;
            top: -1px;
            z-index: 3;
        }

虽然乍一看实现了，但是放大后发现并不完美

于是缩小白色三角形,但是放大后观察仍然有缺陷

        .first-step:before {
            width: 0;
            height: 0;
            content: '';
            border-left: 14px solid white;
            border-top: 11.5px solid transparent;
            border-bottom: 11.5px solid transparent;
            position: absolute;
            right: -13px;
            top: -2;
            z-index: 3;
        }

所以想问问怎么才能完美地实现这个带框箭头

Answer 1

.first-step:after {
            width: 0;
            height: 0;
            content: '';
            border-left: 14px solid #e5e5e5;
            /*border-right: 14px solid transparent;*/
            border-top: 12.5px solid transparent;
            border-bottom: 12.5px solid transparent;
            position: absolute;
            right: -14px;
            top: -1px;
            z-index: -2;
        }
        .first-step:before {
            width: 0;
            height: 0;
            content: '';
            border-left: 14px solid white;
            border-top: 12.5px solid transparent;
            border-bottom: 12.5px solid transparent;
            position: absolute;
            right: -12.7px;
            top: -1px;
            z-index: -1;
        }
        调了一下zindex 然后不完美的地方就是边有点窄