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

Question

[Дмитрий Васюков]

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

Comments

[Ankhena]

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

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

[Александр Борисович]

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]

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

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

Answer 1

[Максим]

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

Answer 2

[Ivan Bogachev]

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

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

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

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

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

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

Answer 3

[cssfish]

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