Skip to content

Instantly share code, notes, and snippets.

@shubham7298

shubham7298/navbeer.html

Last active February 24, 2019 13:38
Show Gist options
  • Save shubham7298/563256ce065302e35ad4338cafbe7a36 to your computer and use it in GitHub Desktop.
Save shubham7298/563256ce065302e35ad4338cafbe7a36 to your computer and use it in GitHub Desktop.
Download ZIP
cool navbar arrowed
Raw
navbeer.html
<!DOCTYPE html>
<html>
<head>
<title>Nav</title>
<style type="text/css">
.nav-pills.nav-wizard > li {
position: relative;
overflow: visible;
display: inline-block;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
padding-top: 10px;
}
.nav-pills.nav-wizard > li + li {
margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
border-radius: 0;
background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
position: absolute;
content: "";
top: 0px;
right: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #eee;
z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
position: absolute;
content: "";
top: 0px;
left: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: #eee #eee #eee transparent;
z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
background-color: #aaa;
color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
background-color: #428bca;
}
</style>
</head>
<body>
<ul class="nav nav-pills nav-wizard" >
<li class="active"><a data-toggle="tab" style="padding:10px 15px;" aria-expanded="false">Home</a></li>
<li><a data-toggle="tab" style="padding:10.5px 15px; " aria-expanded="false">About</a></li>
<li><a data-toggle="tab" style="padding:10.5px 15px;" aria-expanded="false">Contact</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment