IMAGE WITHIN PARALLELOGRAM USING CSS

Takeshi Okada

Total Post:89

Points:629
Posted by  Takeshi Okada
 4539  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. AVADHESH PATEL

    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

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!