我要創建使用CSS的箭頭形狀 - 請看截圖

Question

我想創建一個箭頭形狀的CSS像這樣的

Screenshot

我想創建一個下一個和以前的帖子按鈕這樣的.. 。請幫助

Answer 1

使用僞元素和CSS三角：

.arrow-right, 
 
.arrow-left { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 20px; 
 
    padding: 0 6px; 
 
    color: white; 
 
    background-color: #A5A5A5; 
 
} 
 
.arrow-right::after, 
 
.arrow-left::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
} 
 
.arrow-right::after { 
 
    right: -10px; 
 
    border-color: transparent transparent transparent #A5A5A5; 
 
    border-width: 10px 0 10px 10px; 
 
} 
 
.arrow-left::after { 
 
    left: -10px; 
 
    border-color: transparent #A5A5A5 transparent transparent; 
 
    border-width: 10px 10px 10px 0; 
 
}

<div class="arrow-right">Lorem</div> 
 
<br> 
 
<div class="arrow-left">Lorem</div>