Предлагаю в этой теме делиться опытом по построению различных сложных фигур(форм) и их комбинаций с помощью css.
Например:
с помощью css нужно сделать такую фигуру
перепробовал много вариантов: border-ы, rotate, комбинировал различные фигуры. решения нужного не получил. главное - нужно внутри ромбовидного блока поставить фоновое изображение тем самым залив весь фон этого блока. width блока должен быть всегда 100%. Кто делал что либо подобное?
Есть ли какие-то условия по фону, на котором должна быть расположена фигура? Если фон должен быть белым, то можно решить вопрос углов с помощью белых треугольников.
Попробуй подсмотреть идею для своей задачи тут: https://css-tricks.com/examples/ShapesOfCSS/
В тему фигур: делал вот такого анимированного пакмана на css-е http://codepen.io/podgorniy/pen/IyAxo
обновил слайд макета - так должен выглядеть блок. в том то все и дело что используя решения [отсюда][1], например, добавив сверху и снизу по треугольнику с помощью border, я не могу сделать фоновую патерн-картинку у border. border можно только покрасить в какой нибудь цвет. фон расположения всего блока - не белый.
[1]: https://css-tricks.com/examples/ShapesOfCSS/
Еще есть такая вещь, может поможет: наложение масок. http://www.html5rocks.com/en/tutorials/masking/adobe/