我想用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>