Геометрические css - фигуры(формы)

Предлагаю в этой теме делиться опытом по построению различных сложных фигур(форм) и их комбинаций с помощью 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/

1 лайк