Как скрепить два неквадратных блока?

Question

[Иван Бабий]

Дело в том, что я имею такую картинку, состоящую из двух элементом,с плавающей стороной каждая
Мне нужно разместить точно в таком же виде на сайт, но в итоге получается
Выходят просто два квадратных блока. Посоветуйте, как скрепить их вместе, потому как проблема состоит еще в том, что на каждом блоке будет наложен background-image

Comments

[Ярослав Иванов]

%:!"№;%?№ JSFIDDLE!!!!!!!!!!!

[megorit]

Я так и не разобрался как рисовать эту хрень. Научился только border-radius и хватит, извращение это))

Answer 1

[Александр Шемаханов]

Попробуйте использовать SVG
Пример на CodePen

Answer 2

[Владислав Бойченко]

Для второго блока position: relative и left: -100px (или сколько нужно там) не пойдет?