Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Image within parallelogram using css

Takeshi Okada 6103 29 Jan 2013

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

Takeshi Okada

Other

1 Answers

AVADHESH PATEL 29 Jan 2013

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>

advertising