Two angle line arrows CSS

Question

Is it possible to create two arrows like the photo below with css or I have to use a png or svg?

So far

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

I can't figure how to put another pair of borders.

Thanks in advance

Answer 1

With a bit of tinkering of your example, it's possible, but you'd probably be better off using another method to draw it or using an icon or icon font.

Here's the fiddle

Achieved with

transform: skew();

rather than rotate.

Answer 2

It's possible, but I would just use a SVG in this case:

http://jsfiddle.net/6v7Np/

HTML

<div class="arrow_box"></div>
<div class="arrow_box alt"></div>

CSS

.arrow_box {
    position: relative;
    background: #fff;
    top:50px;
    left:60px;
}
.arrow_box.alt {
    left:80px;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 30px;
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000;
    border-width: 31px;
    margin-top: -31px;
}

Answer 3

With gradients:

a{
  position: relative;
  padding-left: 40px;
}

a::before{
  content: '';    
  position: absolute;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;     
  background-image:
    linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
    linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
    linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
    linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px);          
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: 0% top, 0% bottom, 50% top, 50% bottom;  
                              /* distance ^        ^ */
}

http://jsfiddle.net/E8sRw/