Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts

    CSS transform skew one side

    I was wondering how would I only skew one side of a rectangle (the left)

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Sammy12,

    you cannot skew one side only, but you can cheat.

    Here is a dishonest example...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>cheat for one side skew</title>
    
    <style type="text/css">
    body{
        background-color:#f0f0f0;
     }
    #container{
        width:250px;
        margin:auto;
     }
    #skew {
        float:left;
        width:100px;
        height:100px;
        padding:10px;
        border-top:1px solid #333;
        border-left:1px solid #333;
        -moz-transform: skew(25deg);
        -webkit-transform: skew(25deg);
        -o-transform: skew(25deg);
        -ms-transform: skew(25deg);
        background-color:#fff;
        font-family:verdana,sans-serif;
        font-size:16px;
        color:#333;
        white-space:nowrap;
     }
    #rectangle{
        float:left;
        width:200px;
        height:100px;
        padding:10px;
        margin-left:-92px;
        border:1px solid #333;
        border-left:0;
        background-color:#fff;
        box-shadow:#333 5px 5px 5px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="skew">
    Lorem ipsum dolor sit amet,<br> 
    consectetur adipiscing elit.<br> 
    Donec ultricies sollicitudin<br> 
    nisi, ut molestie felis<br> 
    adipiscing sit amet. Sed
    </div>
    
    <div id="rectangle"></div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    Sammy12 (02-20-2012)

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    haha that works for me! going to be really hackish on my site, but it works!

    thanks!!!

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    No problem, you're very welcome.

    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •