Как лучше всего реализовать подобный элемент?

Question

[webhero]

Имеется ввиду рамку у изображения

Answer 1

[Cocorico]

Вариант с использованием box-shadow:

box-shadow: 10px -10px 0px 0 white,
    10px -10px 0px 1px teal;

При такой реализации можно обойтись без лишних оберток и использования псевдоэлементов
Пример на codepen

Answer 2

[HamSter]

Как вариант, можно использовать обертку для картинки + псевдоэлементы :before и :after.

Сдвиг можно регулировать либо top и left, либо translate(X,Y).

Пример на jsbin

Answer 3

[Дмитрий]

рамку сделать для родительского тега img
например для span
<span><img src="..." /></span>

а саму картинку сместить на position: relative

Comments

[webhero]

а псевдоэлементом как-то можно? Или только таким образом?

[Дмитрий]

webhero можно, но для этого нужно понимать структуру разметки.