我要创建使用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>