Home » Ribbon Banner Navigation bar using HTML and CSS

Ribbon Banner Navigation bar using HTML and CSS

by techmidpoint
Ribbon Banner Navigation bar using HTML and CSS

Ribbon Banner Navigation bar using HTML and CSS

Welcome to you in techmidpoint tutorial. We can create a beautiful navigation bar with HTML and CSS. I have mentioned below the source code of how we create a ribbon banner navigation bar using HTML and CSS. Easily you can copy and paste into your text editor and edit according to your requirement.

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>Ribbon Banner Navbar using HTML and CSS</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <div class="wrap">
    <div class="ribbon">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
 </div>
    <div class="nav">
          <a href="#">Home</a>
        <a href="#">News</a>
        <a href="#">Blog</a>
        <a href="#">Privacy</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        </div>
    </div>
    </body>
</html>

CSS

body {
  background: #ddd;
  font-family: monospace;
}
.wrap{
    position: relative;
    margin: auto;
    width:1000px;
}
.ribbon {
  width: 900px;
  height: 60px;
  margin: 100px auto 0px;
  position: relative;
  background: #3D79D0;
}
.nav{
  position:relative;
  margin-left: 0px;
  margin-top: -50px;
    text-align: center;
}
.nav a{
    padding: 10px;
    width:80px;
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    color:#fff;
    text-transform: uppercase;
    font-weight: bold;
    
}
.nav a:hover{
    background: orange;
    border-radius: 20px;
}
.ribbon i {
  position: absolute;
}

.ribbon i:first-child, .ribbon i:nth-child(2) {
  position: absolute;
  left: -20px;
  bottom: -20px;
  z-index: -1;
  border: 20px solid transparent;
  border-right-color: #043140;
  
}

.ribbon i:nth-child(2) {
  left: auto;
  right: -20px;
  border-right-color: transparent;
  border-left-color: #043140;
}

.ribbon i:nth-child(3), .ribbon i:last-child {
  width: 20px;
  bottom: -20px;
  left: -60px;
  z-index: -2;
  border: 30px solid #1D53C0;
  border-left-color: transparent;
  
}

.ribbon i:last-child {
  bottom: -20px;
  left: auto;
  right: -60px;
  border: 30px solid #1D53C0;
  border-right-color: transparent;

  
}

For More Tutorials Please Click Here

You may also like

Leave a Comment