skewX issue -any ideas?

HTML & CSS
1

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

I’d love this to work. Thank you.

2

HI,

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


<!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:


<!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

That’s brilliant. I see it works, I like the second version, but will dissect later. Thank you Paul.