Looking for Good CSS Triangle Navigation Tutorials [Archive]

stevenmw

11-10-2012, 12:35 PM

I don't know a lot about CSS triangles. I've found several good tutorials on them, but not many that deal with applying them to a navigation.

I was hoping someone could point me towards some good simple navigation tutorials that have arrows underneath the links.

They don't need to have an active state or anything like that. I'm looking more for a technique I can modify because all I care about is applying the triangle to a navigation. So I don't need a full navigation tutorial. If that makes sense.

Thanks.

Excavator

11-10-2012, 05:12 PM

Hello stevenmw,
Just playing around with it a bit, maybe this will give you some ideas?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
#container {
width: 760px;
margin: 0 auto;
padding: 50px 20px 200px;
background: #999;
}
ul#nav {
margin: 0;
padding: 0;
text-align:center;
}
ul#nav li {
display: inline-block;
margin: 0;
list-style: none;
background: #fff;
}
span {
width: 0;
height: 0;
border-right: 30px solid transparent;
border-bottom: 60px solid #00f;
border-left: 30px solid transparent;
}
ul#nav li a {
padding: 15px 40px 0;
display: block;
color: #333;
text-decoration: none;
}
ul#nav li:hover {background: #eee;}
ul#nav li:hover span {border-bottom: 60px solid #f00;}
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="#">Linky</a><span></span></li>
<li><a href="#">Linky</a><span></span></li>
<li><a href="#">Linky</a><span></span></li>
<li><a href="#">Linky</a><span></span></li>
<li><a href="#">Linky</a><span></span></li>
</ul>
</div>
</body>
</html>