watershed/A menu experiment with slanting list items for #pfmeet

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