Задать вопрос
@webhero
верстка

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

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

5b09392a14d79502158045.png
  • Вопрос задан
  • 123 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@overveg
Вариант с использованием box-shadow:
box-shadow: 10px -10px 0px 0 white,
    10px -10px 0px 1px teal;

При такой реализации можно обойтись без лишних оберток и использования псевдоэлементов
Пример на codepen
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
HamSter007
@HamSter007
HTML/CSS верстальщик
Как вариант, можно использовать обертку для картинки + псевдоэлементы :before и :after.

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

Пример на jsbin
Ответ написан
Комментировать
Комментировать
@2fox
рамку сделать для родительского тега img
например для span
<span><img src="..." /></span>

а саму картинку сместить на position: relative
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend-стажер React
Студия Oxem • Москва
от 20 000 до 80 000 ₽
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нужен директолог с опытом работы
19 апр. 2024, в 10:02
6000 руб./за проект
Помощь с парсингом XML файла яндекс товаров
19 апр. 2024, в 09:46
500 руб./за проект
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Ещё заказы