Как сделать border на половину картинки?

Question

[sanekstr]

Здравствуйте подскажите пожалуйста, как сделать чтобы border обволакивал только половину фигуры? Вот как здесь

Заранее спасибо

Answer 1

[svarnoi420]

Первый способ. Самый простой. Через градиенты.
codepen.io/anon/pen/MwQMLG

Второй способ. Через псевдоэлементы. Классика ;)
codepen.io/anon/pen/oXErMr?editors=110

Answer 2

[Глюкъ Виртуален]

Третий способ: представьте себе что это не бордер, а самостоятельный элемент. Например SVG.

Answer 3

[Евгений Перин]

Накидал такой вариант codepen.io/anon/pen/KpQYjL =) Не знаю насколько он нормальный, просто ради интереса сделал

Comments

[Moskus]

Я бы еще добавил ширину и высоту div-у, равные ширине и высоте картинки. Иначе могут быть глюки.