Hỏi về css - tạo mũi tên

Dear anh em,

Hôm nay mình có đọc tài liệu ở trang learn.shayhowe.com/advanced-html-css/complex-selectors/
Có phần mình thấy họ tạo được hình mũi tên.

Anh em có thể giúp phân tích được tại sao lại ra khi sử dụng border với giá trị solid lại có thể làm được hình mũi tên như vậy ko? Mình hiện tại chưa hiểu bản chất tại sao

Code html: <a class="arrow" href="#">Continue Reading</a>
Code css:
body {
font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.arrow {
background: #2db34a;
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
margin-left: 15px;
padding: 0 12px;
position: relative;
text-decoration: none;
}
.arrow:before,
.arrow:after {
content: "";
height: 0;
position: absolute;
width: 0;
}
.arrow:before {
border-bottom: 15px solid #2db34a;
border-left: 15px solid transparent;
border-top: 15px solid #2db34a;
left: -15px;
}
.arrow:after {
border-bottom: 15px solid transparent;
border-left: 15px solid #2db34a;
border-top: 15px solid transparent;
right: -15px;
}
.arrow:hover {
background: #ff7b29;
}
.arrow:hover:before {
border-bottom: 15px solid #ff7b29;
border-top: 15px solid #ff7b29;
}
.arrow:hover:after {
border-left: 15px solid #ff7b29;
}