Skip to content

Instantly share code, notes, and snippets.

@pankajpatel

pankajpatel/Breadcrumb Step Design

Last active August 29, 2015 14:08
Show Gist options
  • Save pankajpatel/49335bbc90288b3d7b09 to your computer and use it in GitHub Desktop.
Save pankajpatel/49335bbc90288b3d7b09 to your computer and use it in GitHub Desktop.
Download ZIP
Breadcrumb Step Design
Raw
Breadcrumb Step Design
<style>
.slice{
display: inline-block;
}
.slice .head{
display: inline-block;
border: 15px solid transparent;
border-left-width: 15px;
border-right-width: 0px;
z-index: 10;
position: relative;
border-left-color: #999;
vertical-align: top;
float: left;
}
.slice .body{
display: inline-block;
background-color: #999;
padding: 0 8px 0 8px;
color: #fff;
position: relative;
height: 30px;
line-height: 30px;
vertical-align: top;
float: left;
}
.slice .tail{
display: inline-block;
background-color: #999;
border: 15px solid transparent;
border-left-width: 15px;
border-right-width: 0px;
border-left-color: #fff;
vertical-align: top;
float: left;
}
</style>
<div class="slice">
<div class="tail"></div>
<div class="body">Slice</div>
<div class="head"></div>
</div>
<div class="slice">
<div class="tail"></div>
<div class="body">Slice</div>
<div class="head"></div>
</div>
<div class="slice">
<div class="tail"></div>
<div class="body">Slice</div>
<div class="head"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment