我想要用css畫一個如下圖的箭頭，帶邊框

思路很簡單，用一個帶坐上下邊框的長方形，拼一個灰色的三角形，然后在用一個白色的三角形遮擋掉灰色三角形的主題部分從而形成一個三角形的邊框
以下是css實現(xiàn)

        .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;
        }

雖然乍一看實現(xiàn)了，但是放大后發(fā)現(xiàn)并不完美

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

        .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;
        }

所以想問問怎么才能完美地實現(xiàn)這個帶框箭頭