鍍金池/ 問答/HTML5  HTML/ css 畫帶邊框的箭頭的問題

css 畫帶邊框的箭頭的問題

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

clipboard.png

思路很簡(jiǎn)單，用一個(gè)帶坐上下邊框的長方形，拼一個(gè)灰色的三角形，然后在用一個(gè)白色的三角形遮擋掉灰色三角形的主題部分從而形成一個(gè)三角形的邊框
以下是css實(shí)現(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;
        }

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

clipboard.png

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

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

clipboard.png

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

回答
編輯回答
撿肥皂
.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;
        }
        調(diào)了一下zindex 然后不完美的地方就是邊有點(diǎn)窄
2017年10月7日 08:15