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

Question

[Дмитрий]

Ничего не лезет в голову как такое сделать. Думал на счет after и before, но ещё ведь нужно сделать увеличенную ширину блока в топе.
Собственно, вот:

Comments

[Максим Тимофеев]

"но ещё ведь нужно сделать увеличенную ширину блока в топе" - кроме Вас это никому не понятно

[Дмитрий]

Максим Тимофеев, имеется в виду то, что в топе блок шире чем в боте.

[Ankhena]

Дмитрий: ниже написала пример, как сделать трапецию растягиваемую по высоте

Answer 1

[iBird Rose]

https://jsfiddle.net/iBird/qfw1bss5/

Comments

[Kovalsky]

Думаю, парень спрашивает, как сделать такой блок, а не просто рисовку. То есть, например, чтобы контент блока увеличивал его по высоте и вёрстка не ехала.

[Дмитрий]

Никита Полевой, именно это) А ещё желательно без создания дополнительных блоков в html (интересно возможно ли так).

[iBird Rose]

Никита Полевой: если такие блоки делают - то смотреться они красиво будут только с одинаковой высотой. а значит фиксированный height и overflow: hidden; и все будет хорошо)

[iBird Rose]

Дмитрий: ты пока это будешь верстать - все равно какие то да блоки но создашь. из любого из них бери after и before и действуй

[Дмитрий]

iBird Rose, уже сверстал. Единственное что можно взять, это внутренний тэг p. Спасибо, буду пробовать чтоб по красоте)

Answer 2

[Ankhena]

Треугольнички - треугольниками за счет border и before, after
Низ трапецией - вот этим html5book.ru/3d-transform, либо тоже приставленными треугольниками через before, after

Для растяжения - треугольникам в трапеции задавать фон градиентом https://jsfiddle.net/zosescs2/

Comments

[Kovalsky]

А как сделать, чтоб блок мог изменять высоту не в ущерб верстке этих треугольников?

[Ankhena]

Никита Полевой: ладно, меняю на градиентный фон у нижних треугольников
https://jsfiddle.net/zosescs2/
растягивается куда хочется :)

[Kovalsky]

Ankhena W: 0_0 Иисус, это же было очевидно. Спасибо!

[Ankhena]

Никита Полевой: сама частенько забываю про пользу градиентов и теней

Answer 3

[Максим Тимофеев]

Думаю, что изменения ширины можно сделать за счет прозрачного треугольного border, а верх с помощью before
https://jsfiddle.net/asq9ajtg/
либо background растянутый по высоте картинкой слева и справа и отрицательным margin-top у блока