<!DOCTYPE html>
<html>
<head>
<style>
#navigation_container {
margin: 0 auto;
width:100%;
clear:both;
position:relative;
top: -30px;
left: 0px;
}
#navigation li {
list-style: none;
display: block;
float: left;
margin: 1em 0.8em;
}
#navigation li a {
float:left;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
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;
-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: 500;
margin: 0em 0;
top: 0px;
left: 0px;
}
.l-triangle-top {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #d9542b;
border-bottom: 50px solid transparent;
height:119px;
width:100px;
position: absolute;
float: left;
top: 0px;
left: -50px;
}
.l-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
float: left;
top: -40px;
left: -50px;
}
.r-triangle-top {
border-color: #d9542b transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
float: right;
right: -50px;
top: 0px;
}
.r-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
float: right;
top: -40px;
right: -50px;
}
</style>
</head>
<body>
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<div id="navigation_container">
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<div class="rectangle">
<ul id="navigation">
<li><a href="#"><div class="conmenu"> <div class="divimagen"></div><div class="submenu">Home</div></div></a></li>
<li><a href="#"><div class="conmenu"> <div class="divimagen2"></div><div class="submenu">Paginas Web</div></div></a></li>
<li><a href="#"><div class="conmenu"> <div class="divimagen3"></div><div class="submenu">Sistemas</div></div></a></li>
<li><a href="#"><div class="conmenu"> <div class="divimagen4"></div><div class="submenu">Contacto</div></div></a></li>
</ul>
</div>
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
</div>
</body>
</html>
Comentarios sobre la versión: Versión 5 (0)
No hay comentarios