Как сверстать это?

Question

Дмитрий Васюков @dmitryvasyukov

Как сверстать это?

Как сверстать этот элемент, ответьте кто знает?

Вопрос задан более трёх лет назад
456 просмотров

3 комментария

Подписаться 2 Оценить 3 комментария

Ankhena @Ankhena Куратор тега HTML

Зависит от того, какая дальнейшая судьба у этих блоков при изменениях ширины окна.

Самый простой способ - одной фоновой картинкой на ней прозрачный блок с текстом :)

Написано более трёх лет назад
Александр Борисович @Alexufo
Ankhena W: ага)) а линки тож приклеить) и вот так оформить))))
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="rect" coords="90,58,3" href="mercur.htm" alt="Mercury"> </map>

вроде еще не деприкейтед))
Написано более трёх лет назад
Ankhena @Ankhena Куратор тега HTML

Александр Борисович: чего приклеить?
Написала же полупрозрачная полоса с текстом.

Где-то в вопросе написано, что ссылки по размеру картинки?
Чисто теоретически, тогда ссылкам skew, отрицательный margin и overflow контейнеру.

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 2

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 21 час назад
- 61 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 22 часа назад
- 186 просмотров
1

ответ
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- вчера
- 44 просмотра
1

ответ
Вёрстка

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- вчера
- 92 просмотра
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 18 апр.
- 81 просмотр
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 18 апр.
- 91 просмотр
2

ответа
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 18 апр.
- 58 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 18 апр.
- 84 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 18 апр.
- 93 просмотра
0

ответов
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать чат-бота telegram для миникурса

20 апр. 2024, в 18:09

70000 руб./за проект

Настроить доступ к Netflix

20 апр. 2024, в 18:04

3000 руб./за проект

Помочь настроить GeoIp у nginx для docker nginx:alpine

20 апр. 2024, в 17:55

3000 руб./за проект

Зависит от того, какая дальнейшая судьба у этих блоков при изменениях ширины окна.

Самый простой способ - одной фоновой картинкой на ней прозрачный блок с текстом :)
Ankhena W: ага)) а линки тож приклеить) и вот так оформить))))
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="rect" coords="90,58,3" href="mercur.htm" alt="Mercury"> </map>

вроде еще не деприкейтед))
Александр Борисович: чего приклеить?
Написала же полупрозрачная полоса с текстом.

Где-то в вопросе написано, что ссылки по размеру картинки?
Чисто теоретически, тогда ссылкам skew, отрицательный margin и overflow контейнеру.

Answer 1 · 2017-08-20 05:25:36

https://codepen.io/simkaUser/pen/brvVaq?editors=1100 это как пример , я пытался полностью сделать аналогию ....возможно в каких то браузерах не сработает SVG так как я не указал заголовки самого документа SVG
Такие плюшки на SVG делаются как в лужу пукнуть на коленке , открываете Inkscape и просто рисуете , потом сохраняете как отдельный файл и подключаете как background-image:url(ваш свг); либо как inline документ как в моём случае ...
Я рисовал на обычном листе бумаги и как видно на codepen что я просто сместил один слой g
Для того что бы пример сделать адаптивным требуется указать viewbox для svg

Answer 2 · 2017-08-20 08:53:59

Как сверстать это?

Вот как-то так (вариант без SVG, построенный на CSS-трансформациях).

Пара замечаний по поводу решения:
- Картинки в виде нормальных картинок, а не фонов, нужны для того, чтобы было проще адаптировать под ретину, загружать их независимым lazy-loadом и для лучшего индексирования поисковыми системами (не могу ни подтвердить, ни опровергнуть, но по личным наблюдениям фоновые картинки имеют свойство иногда не индексироваться вообще, зависит от фазы луны).
- В связи с первым пунктом добавил полифил для свойства object-fit (нужен только для IE, остальные браузеры давно уже умеют его использовать).
- Все резиновое, но на маленьких экранах лучше сбрасывать одну секцию под другую (на вашей картинке это не отображено, но логика подсказывает).

Что имею в виду

На большом экране:

На маленьком:

Answer 3 · 2017-08-20 16:30:58

например так:
-левая статична, ширина ~ 75% от общей
- правая поверх нее, (отступ слева точно меряем до нижней точки, можно в %), далее skew и transform-origin: 0 100%
- картинку/фон внутри правой обратным skew с transform-origin нижним
- ну и overflow само собой на контейнер
все.

Как сверстать это?

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

Минуточку внимания

Войдите на сайт