Cómo agregar un borde de degradado encima de la imagen (borde diagonal)

Necesito algo como esto

imagen

Pero encima de una imagen, este es mi primer bash pero no funciona

http://jsfiddle.net/wo8gbhx3/17/

Y este es mi marcado (ahora)

HTML

 

CSS

 .testing ul { list-style: none; } .testing ul li { width: 25px; height: 25px; position: relative; } .testing ul li img { width: 100%; height: 100%; } .unavailable:before { position: absolute; border: 2px solid green; /* Just for testing */ background:repeating-linear-gradient( 150deg, #FFF, #FFF 16px, #000 18px); } 

Necesitas algo como esto

 .testing ul { list-style: none; } .testing ul li { width: 250px; height: 250px; } .testing ul li img { width: 100%; height: 100%; display: block; } .unavailable { position: relative; } .unavailable a:after { content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; border: 2px solid green; /* Just for testing */ background: repeating-linear-gradient(150deg, transparent, transparent 16px, #000 18px); z-index: 2; }