Ribbon Nav Bar - by polepallesunil on CSSPop

ribbon-bar.css

import url('http://fonts.googleapis.com/css?family=Lobster');

html, body, ul, li, a, p, div, h1{margin:0px; padding:0px;}
html{background: #77d5fb;}
body{background:none;
width: 100%; height: 100%;
margin: 0 0;
font-family:Arial,Verdana,Sans-Serif;
font-size:12px;
}


#menu{margin:3em 0 0 0; float:left; width:100%; height:67px;}

h1 a{
    display: inline-block;
    font: 26px 'Lobster',arial,serif;
    margin: 0;
    padding-top:13px;  
  float:left;
	position:absolute;
	left:40px;
	color:#fff;
	text-decoration:none;
	text-shadow: 0 1px 1px rgba(0,0,0,0.5);
	font-weight:normal;
}


#navigation_container {
	margin: 0 auto;
	width: 900px;
	position:relative;
}

#navigation li {
        list-style: none;
        display: block;
        float: left;
		margin: 1em 0.8em;
}

ul#navigation{float:right; padding:5px 20px 0 0;}

#navigation li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size:18px;
        margin: 0;
        line-height: 28px;
}

#navigation li.active a:hover,
#navigation li a:hover {
        margin-top: 2px;
}

#navigation li.active {
        font-style: italic;
}

#navigation li.active a {
}

.rectangle{
	background: #e5592e;
   height: 62px;
   position: relative;
	width:900px;
	
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

	 -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	border-radius: 2px;

	z-index:1; 

   margin:0;
}


.l-triangle-top {
	border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position:relative;
   border-color: #d9542b transparent transparent;
    float: left;
   top: 1px;
   left: -50px;
}

.l-triangle-bottom {
	border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position:relative;
 

ribbon-bar.html

<div id="navigation_container">

<div id="menu">
   <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>


   <div class="rectangle">
  <h1><a href="http://polepallesunil.webs.com/">Polepalle Sunil Kumar</a></h1>
   

   	
		<ul id="navigation">
	   	  <li><a href="http://polepallesunil.webs.com/">✭ Home</a></li>
	      <li><a href="http://polepallesunil.webs.com/aboutme.htm">✭ About me</a></li>
	      <li><a href="http://polepallesunil.webs.com/links.html">✭ My Links</a></li>
	      <li><a href="#">✭ Contact</a></li>
	    </ul>
   
   </div>
   
   <div class="r-triangle-top"></div>
   <div class="r-triangle-bottom"></div>


</div>

<form id="login">
    <h1>Log In</h1>
    <fieldset id="inputs">

        <input id="username" type="text" placeholder="Username" autofocus required>   
        <input id="password" type="password" placeholder="Password" required>
    </fieldset>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href="">Forgot your password?</a><a href="">Register</a>
    </fieldset>
    <a href="http://polepallesunil.webs.com/links.html" id="back">Back to article...</a>

</form>


</div>