Как проще сверстать данный элемент?

Question

[Паша Тарасенко]

Конкретнее градиентную рамку и прозрачную рамку при hover эффекте и обычное состояние с одной рамкой и прозрачным фоном.
думаю что как то через background-size, но в голову не приходит идея как именно

Answer 1

[Yevhenii K]

Почему бы не сделать проще? Сделать ее фоном и при hover менять bg, тем более в исходниках есть эти картинки(Если качали с htmlacademy).

Comments

[Паша Тарасенко]

ладно, хотел просто без картинок

[Yevhenii K]

Паша Тарасенко: Я когда делал этот макет столкнулся с той же проблемой, на вопросе как сделать бордер градиентом я сдался.
codepen.io/anon/pen/BKameR

[Паша Тарасенко]

Женя К: а можно ссылочку? Я пока подсматривать не буду, а когда уже сделаю и доведу верстку до блеска, то сравню свой результат с вашим.

[Yevhenii K]

Паша Тарасенко: Скинул на почту, он закончен не полностью.

[Паша Тарасенко]

Женя К: Кстати макет мягко говоря кривовато нарисован, поэтому пиксель перфинга практически не реально соблюдать

[Паша Тарасенко]

Женя К: заметил много неточностей грубых косяков в вашей работе, если интересно могу написать списочек)

[Yevhenii K]

Паша Тарасенко: Пишите на почту. Может и доделаю все заодно.

Answer 2

[MNB]

можно попробовать
caniuse.com/#feat=border-image + caniuse.com/#feat=css-gradients
+ обязательно вендорные префиксы
но не обещаю

Comments

[Паша Тарасенко]

border-image на border radius не действует