watershed · July 13, 2011 12:20 · watershed · Jul 13, 2011
diff --git a/A menu experiment with slanting list items for #pfmeet b/A menu experiment with slanting list items for #pfmeet
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>A menu experiment with slanting list items</title>
  
  <style type="text/css" title="text/css" media="screen">
 <!--

 * {margin: 0; padding: 0;}
 body {font-family: sans-serif;}
 a {color: #fff; text-decoration: none;}

 ul {list-style: none; overflow: hidden;}

 li, 
 li b,
 li span, 
 li i {float: left; line-height: 40px; display: block;}

 li {margin-right: -39px;}

 li a 
 {
 display: block;
 background: #ccc;
 padding: 0 10px;
 }

 li span {background: #f00; padding: 0 15px;}

 li b, 
 li i
 {
 display: block;
 border-bottom: 40px solid #f00;
 border-left: 20px solid transparent;
 }

 li i 
 {
 border: 0;
 border-top: 40px solid #f00;
 border-right: 20px solid transparent;
 }

 li a:hover span {background: #666;}

 li a:hover b {border-bottom: 40px solid #666;}
 li a:hover i {border-top: 40px solid #666;}

 li:first-child b {border-left: 0; width: 10px;}
 li.last i {border-right: 0; width: 10px;}

 -->
 </style>
 </head>
 <body>

 <ul>
  <li><a href="#"><b></b><span>Ooh</span><i></i></a></li>
  <li><a href="#"><b></b><span>Look</span><i></i></a></li>
  <li><a href="#"><b></b><span>It’s</span><i></i></a></li>
  <li class="last"><a href="#"><b></b><span>Skewed</span><i></i></a></li>
 </ul>

 </body>
 </html>