Home > DeveloperSection > Forums > Image within parallelogram using css
Takeshi Okada
Takeshi Okada

Total Post:89

Points:629
Posted on    January-29-2013 2:06 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 3644  View(s)
Rate this:

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



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    January-29-2013 9:16 AM

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 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>


Don't want to miss updates? Please click the below button!

Follow MindStick