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

Question

[Даниил Сухих]

Есть два элемента наколнённые, как сделать что-бы они наклонялись только в месте их соединения?
https://jsfiddle.net/Lfg2s51p/

Comments

[Алексей Юдов]

Используй transform.
А вообще какую фигуру должны блоки образовать?

[Даниил Сухих]

TCloud, прямоугольник с соединением по середине(наискосок)

[Вадим Белкин]

Даниил Сухих, так?

[Даниил Сухих]

Вадим Белкин, нет

[Вадим Белкин]

Даниил Сухих, извиняюсь, невнимательно посмотрел пример, на мелком экране другое расположение блоков было.
Что-то вроде этого нужно? Обязательно двумя блоками?

[Даниил Сухих]

Вадим Белкин, Да это, двумя не обязательно.

[Вадим Белкин]

Даниил Сухих, ну тогда как в примере можно через фоновый градиент без плавного перехода и под нужным углом

Answer 1

[CODALSD]

.test {
	width: 400px;
	height: 200px;
	float: left;
	background: #7aadff;
	transform: skewX(15deg);
  margin-left:100px;
}

.test2 {
	width: 400px;
	float: left;
	height: 200px;
	background: #ffd079;
	transform: skewX(15deg);
}
.test:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: -55px;
    z-index: -1;
    background: #7aadff;
    transform-origin: bottom left;
    -ms-transform: skew(-15deg, 0deg);
    -webkit-transform: skew(-15deg, 0deg);
    transform: skew(-15deg, 0deg);
}
.test2:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: #ffd079;
    transform-origin: bottom left;
    -ms-transform: skew(-15deg, 0deg);
    -webkit-transform: skew(-15deg, 0deg);
    transform: skew(-15deg, 0deg);
}

Как один из вариантов для решения возникшего вопроса