How To Add A Gradient Border Above Image (diagonal Border)

I need to something like this But above an image, here is my first attempt but it doesn't work http://jsfiddle.net/wo8gbhx3/17/ And this is my markup (now) HTML

; 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; }

<div class="testing">
  <ul>
    <li class="selected unavailable">
      <a href="#">
        <img src="http://placehold.it/200x200" />
      </a>
    </li>
  </ul>
</div>