SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    skewX issue -any ideas?

    Does anyone have an idea for how I could skew the <li> item, without skewing the text? Am thinking about before: after: maybe?

    http://jsfiddle.net/Alex33/By3H6/

    I'd love this to work. Thank you.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    If you don't mind an inner element you can just reverse the skew.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .toolslist li:nth-child(odd) {
    	background-color: #D8D6C5;
    	padding: .4em 0 .4em 1em;
    	-webkit-transform: skewX(25deg);
    	transform: skewX(25deg);
    }
    .toolslist li:nth-child(odd) span{
    	-webkit-transform: skewX(-25deg);
    	transform: skewX(-25deg);
    	display:block;
    }
    </style>
    </head>
    
    <body>
    <ul id="fishbox" class="toolslist">
    		<li><span>Snapper</span></li>
    		<li><span>Tiger Sharks</span></li>
    		<li><span>Bluefish</span></li>
    </ul>
    </body>
    </html>
    Or without an extra element using :after:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .toolslist li { position:relative;padding:3px 5px 3px 15px; }
    .toolslist li:nth-child(odd):after {
    	content:" ";
    	background-color: #D8D6C5;
    	padding: .4em 0 .4em 1em;
    	-webkit-transform: skewX(25deg);
    	transform: skewX(25deg);
    	position:absolute;
    	left:0;
    	top:0;
    	right:0;
    	bottom:0;
    	z-index:-1
    }
    </style>
    </head>
    
    <body>
    <ul id="fishbox" class="toolslist">
    		<li>Snapper</li>
    		<li>Tiger Sharks</li>
    		<li>Bluefish</li>
    </ul>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's brilliant. I see it works, I like the second version, but will dissect later. Thank you Paul.


Bookmarks

Posting Permissions

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