css - 两个 Angular 线箭头 CSS

Question

是否可以使用 css 创建如下图所示的两个箭头，或者我必须使用 png 或 svg？

到目前为止

HTML

a {
  position: relative;
  display: block;
  padding-left: 30px;
  line-height: 45px;
  height: 45px;
}
a:after,
a:before {
  right: 100%;
  top: 26px;
  border-left: 1px solid black;
  content: " ";
  height: 30px;
  width: 25px;
  position: absolute;
  pointer-events: none;
  left: 7px;
}
a:after {
  -webkit-transform: rotate(135deg);
  left: -11px;
}
a:before {
  -webkit-transform: rotate(45deg);
  top: 5px;
}

<a href="#">Next</a>

jsfiddle

我不知道如何放置另一对边框。

提前致谢

Answer 1

通过对您的示例进行一些修改，这是可能的，但您可能最好使用另一种方法来绘制它或使用图标或图标字体。

Here's the fiddle

实现

transform: skew();

而不是旋转。