---
title: "Image within parallelogram using css"  
description: "Image within parallelogram using css"  
author: "Takeshi Okada"  
published: 2013-01-29  
updated: 2013-01-29  
canonical: https://www.mindstick.com/forum/551/image-within-parallelogram-using-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Image within parallelogram using css

Hi Everyone!

Can [anyone help me](https://www.mindstick.com/forum/331/can-anyone-help-me-out-how-to-use-session-concept)? My [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) is; \
I want to [display image](https://www.mindstick.com/forum/33970/how-to-display-image-without-streach-in-uiscrollview) within parallelogram. I'm try many time, but in my case image take shape of parallelogram means image covered into parallelogram shape.

Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)

## Replies

### Reply by AVADHESH PATEL

Hi Takeshi Okada!

You can try this css. This css support all browser with letest version

<style type="text/css">\
.box\
{\
width: 673px;\
height: 127px;\
background: #AFAFAF;\
overflow: hidden;\
margin: 1em 0;\
float: left;\
padding-right: 23px;\
}\
.box .inner\
{\
-ms-transform: skew(-20deg,-10deg); /* IE 9 */\
-moz-transform: skew(-20deg,-10deg); /* Firefox */\
-webkit-transform: skew(-20deg,-10deg); /* Safari and Chrome */\
-o-transform: skew(-20deg,-10deg); /* Opera */\
width: 229px;\
height: 240px;\
margin-top: -70px;\
margin-right: -12px;\
overflow: hidden;\
background: #E1E1E1;\
float: right;\
}\
.box .inner .content\
{\
-ms-transform: skew(20deg,10deg); /* IE 9 */\
-moz-transform: skew(20deg,10deg); /* Firefox */\
-webkit-transform: skew(20deg,10deg); /* Safari and Chrome */\
-o-transform: skew3(0deg,10deg); /* Opera */\
width: 115px;\
height: 115px;\
margin-top: 78px;\
margin-left: 60px;\
overflow: hidden;\
background: #f1f1f1;\
}\
</style>

Include this css as below line of code

<div class="box">\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
</div>

If you want to display more than one parallelogram than used below line of code

<div class="box">\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
</div>

If you want to display more than one row for display parallelogram with [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) than used below line of code

<div class="box">\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
</div>\
<div class="box" style="margin-top: -13px;">\
<div class="inner" style="margin-right: 100px;">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
<div class="inner">\
<div class="content">\
<img src="Images/Desert.jpg" alt="" title="" width="115px" height="115px" /></div>\
</div>\
</div>


---

Original Source: https://www.mindstick.com/forum/551/image-within-parallelogram-using-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.