Hi Everyone!
Can anyone help me? My problem is;
I want to display image 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
Image within parallelogram using css
575929-Jan-2013
AVADHESH PATEL
29-Jan-2013Hi 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 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>