Image within parallelogram using css

Total Post:89

Points:629
 5052  View(s)
Ratings:
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

  1. Post:604

    Points:4228
    Re: Image within parallelogram using css

    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>

Answer