lo que estoy intentado es sacar la siguiente figura:
practicando css he conseguido lo siguiente:
.paralelogramo {
width: 150px;
height: 100px;
border: 3px solid #555;
background: #428bca;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}
.rombo {
width: 100px;
height: 100px;
top: 50px;
border: 3px solid #555;
background: #428bca;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.mycontainer
{
position: absolute;
}
<section class="feature_area">
<div class="mycontainer">
<div class="paralelogramo"><h1>hola mundo</h1></div>
<div class="rombo">
</div>
</div>
</section>
y es hasta donde pude llegar si alguien puede ayudar posicionar el rombo detrás del paralelogramo