Собрал три блока в виде геометрических фигур - сверху и снизу треугольники в середине параллелогамм. И составил их в столбец, обернув все в общий блок.
<div class="d4">
<div class="d1"></div>
<div class="d5"></div>
<div class="d3"></div>
</div>
Но в результате получилось, что расстояния между ними большие. Как состывать их вместе, нужно практически вплотную, максимум с отступом в 10 px. Использование padding и margin к желаемому результату не привело.
Код CCS такой
Треугольник сверху
width: 0;
height: 0;
border-top: 100px solid #68B8AE;
border-right:425px solid transparent;
display:inline-block;
margin-top:600px;
параллелогамм
-moz-transform: rotate(76deg) skew(7deg, 15deg);
-webkit-transform: rotate(76deg) skew(7deg, 15deg);
-o-transform: rotate(76deg) skew(7deg, 15deg);
-ms-transform: rotate(76deg) skew(7deg, 15deg);
transform: rotate(76deg) skew(7deg, 15deg);
width:250px;
height:450px;
border:4px solid #8B0000;
background:#7FFF00;
margin-left:86px;
треугольник снизу
width: 0;
height: 0;
border-bottom: 100px solid red ;
border-left: 425px solid transparent;
margin-bottom:700px;
display:inline-block;
}
