Как реализовать блок с таким дизайном?

Question

[Ильшат]

Учусь верстать. Скачал PSD макет сайта. Там есть блок
Не подскажите, как верстаются подобные вещи?

Правильно ли я понимаю, что можно сделать фоновым рисунком например: а все остальное при помощи абсолютного позиционирования подогнать?

Спасибо.

Answer 1

[Даша Циклаури]

1) svg
2) img, map htmlbook.ru/html/map

Comments

[Капитан Какао]

Согласен с Александр А, map нельзя оформлять через css. По этому если и идти таким путём, то SVG. Но не думаю что оно того стоит)

Answer 2

[Константин Самсин]

Посмотреть Тут, найти фигуры и поколдовать абсолют блоками на релатив контенте.

Comments

[Ильшат]

да я пытался, но у меня получается (например берем треугольник с верхней части ромба):
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid transparent; - а как сюда еще добавить линию в 1px как на рисунке?

[Константин Самсин]

Ильшат: добавить див линией и подогнать в угол

Answer 3

[Денис Инешин]

Да, картинкой проще всего.

Answer 4

[Виктор Бабий]

SVG!