Css html رسم متوازي مستطيلات

نعم يمكننا عمل هذا حيث يتطلب عنصر div: HTML و بعض التنسيقات:

HTML:

<div id="parallelogram"></div>

+

CSS:

#parallelogram{
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -o-transform: skew(30deg); 
    transform: skew(30deg); 
}

والشكل:

عليك التلاعب بمواقع العناصر من خلال الخاصية position و تموضع العناصر فوق بعضهم عن طريق z-index