Skip to content

Instantly share code, notes, and snippets.

@jlord

jlord/index.html

Created May 31, 2012 22:08
Show Gist options
  • Save jlord/2846658 to your computer and use it in GitHub Desktop.
Save jlord/2846658 to your computer and use it in GitHub Desktop.
Download ZIP
A CSS Breadcrumb Style
Raw
index.html
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<style>
#container {position: relative; float: right; height: 40px; }
/* This creates the boxes, the left one is on top and nudged right over the right box */
.left { position: relative; float: left; height: 40px; background: #BCEDDC; right: 7px; z-index: 2; }
.right { position: relative; float: right; height: 40px; background: #BCEDDC; }
.left p, .right p { line-height: 4px; font-family: 'Arvo'; font-size: 18px; color: #333; white-space: nowrap; }
.left p { margin-right: 30px; margin-left: 30px; }
.right p { margin-right: 30px; margin-left: 40px; }
/* Creates the triangle at the end (right side) of the left box */
.left::before {
content: " ";
position: relative;
float: right;
width: 0;
height: 0;
left: 20px;
border-left: 20px solid #BCEDDC;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* Creates the triangle at the beginning (left side) of the right box */
/* This triangle needs to match the background the breadcrumb sits on. Solid colors work best. */
.right::before {
content: " ";
position: relative;
float: left;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
}
</style>
</head>
<body>
<div id="container">
<div class="left"><p>Economic Development</p></div>
<div class="right"><p>Downtown Corridor</p></div>
</div><!-- #container END-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment