Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="wizard">
 <a class="inicio">
   <span></span>test1
   </a>
​
   <a class="badge">
     <span>blah blah</span>
   </a>
<a class="fim">
  <span></span>test2
</a>
</div>
</body>
</htm
 
.wizard .badge {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}
​
.wizard .badge:before {
    width: 0;
    height: 0;
    border-top: 20 solid #FFF;
    border-bottom: 20 inset #FFFFFF;
    border-right: 20 solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.wizard .badge:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
​
.wizard .fim {
    padding: 10px 0px 5px 0px;
    margin-right: 5px;
    background: #007ACC;
    position: relative;
    display: inline-block;
    width: 100px;
    height: 25px;
    color: white;
    font-family: sans-serif;
}
.wizard .fim:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid white;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
​
.wizard .fim:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #007ACC;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
​
.wizard .inicio {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #007ACC;
    position: relative;
    display: inline-block;
    width: 75px;
    height: 20px;
    color: white;
    font-family: sans-serif;
}
​
.wizard .inicio:before {
    width: 0;
    height: 0;
    border-top: 20px solid #FFF;
    border-bottom: 20px inset #FFFFFF;
    border-right: 20px solid #007ACC;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.wizard .inicio:after {
   width: 0;
    height: 0;
    border-top: 20px solid #007ACC;
    border-bottom: 20px inset #007ACC;
    border-right: 20px solid transparent;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
​
.wizard .inicio:hover{
    background: rgb(86, 180, 243);
    color: #FFF;
}
.wizard .inicio:hover:before{
    border-top: 20px solid #FFF;
    border-bottom: 20px inset #FFFFFF;
    border-right: 20px solid rgb(86, 180, 243);
    color: #FFF;
}
.wizard .inicio:hover:after{
    border-top: 20px solid rgb(86, 180, 243);
    border-bottom: 20px inset rgb(86, 180, 243);
    border-right: 20px solid transparent;
    color: #FFF;
}
​
/*
.wizard .fim:hover{
    background: rgb(86, 180, 243);
    color: #FFF;
}
​
.wizard .fim:hover:before{
    background: rgb(86, 180, 243);
    color: #FFF;
}
​
.wizard .fim:hover:after{
     background: rgb(86, 180, 243);
    color: #FFF;
}
​
.wizard .inicio:hover:before{
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px inset transparent;
    border-right: 20px solid #rgb(86, 180, 243);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
*/
.tituloMes {
    font-family: Helvetica, Arial, Verdana, sans-serif;
        text-align: center;
    font-size: 14pt;
    font-weight: bold;
    color: #0073b9;
/** margin-left: 10px; **/
    padding-left: 10px;
    padding-right: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 20px;
        vertical-align:top;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers