讓邊框變成箭頭樣式（傾斜語法）

利用這個語法，
可以輕鬆在文字的下方（或右方）增加一個有質感的箭頭

【HTML 語法】 

<p>Arrow Btn <strong class="arrowsBox"></strong></p>

【CSS】

.arrowsBox::before {
    content: ''; 
    border-bottom: 1px solid #f78a74; /* 下方一條線 */
    border-right: 1px solid #f78a74; /* 右方一條線 */
    -webkit-transform: skewX(45deg); 
    -ms-transform: skewX(45deg); 
    transform: skewX(45deg); /* 將該區塊傾斜 */
    width: 50px; 
    height: 7px; 
    display: inline-block; 
}

【說明】

當區塊未設定傾斜時呈現的樣式

而當區塊設定傾斜後，就可以明顯看到它變成箭頭的樣式了