CSS Right Arrow

Question

Я пытаюсь создать стрелку вправо с серой рамкой с css. но я думаю, что стрелка уже притирает левый прямоугольник. требуется некоторый штрих здесь:

.arrow_box { 
 
    position: relative; 
 
    background: #fff; 
 
    border: 2px solid #aaa; 
 
    width: 300px; 
 
    padding: 8px 20px 8px 40px; 
 
} 
 
.arrow_box:after, 
 
.arrow_box:before { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 
.arrow_box:after { 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-left-color: #fff; 
 
    border-width: 17px; 
 
    margin-top: -17px; 
 
} 
 
.arrow_box:before { 
 
    border-color: rgba(170, 170, 170, 0); 
 
    border-left-color: #aaa; 
 
    border-width: 19px; 
 
    margin-top: -19px; 
 
}

<div class="arrow_box"><a href="#">Consumer Customer</a> 
 
</div>

Answer 1

Вы можете добавить границ конкретных сторон, за исключением прав:

.arrow_box { 
position: relative; 
background: #fff; 
border-left: 2px solid #aaa; 
border-top: 2px solid #aaa; 
border-bottom: 2px solid #aaa; 
width: 300px; 
padding: 8px 20px 8px 40px; 
box-sizing: border-box; 
} 

https://jsfiddle.net/2ca4aucm/1/