0

bellow is my navigation, it skew type. so when menu will active then it will red color and topbar blue area also cover by red color bellow is show one active button how it will be look like

i can do that by sprite image. and another way is css skew -webkit-transform: skew(16deg, 0); there is another way is canvas but i think canvas bit complicate.

is there any other best to skew type navigation ?

enter image description here

pagol
  • 497
  • 9
  • 25
  • here is one example http://stackoverflow.com/questions/14615492/css-skew-only-container-not-content but i want to what is best – pagol Apr 24 '14 at 20:25
  • Take a look at this answer, maybe you can use it http://stackoverflow.com/a/22567824/949476 – dfsq Apr 24 '14 at 20:34

1 Answers1

0

Try to use this :

HTML 

  <nav role='navigation'>
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li class="current"><a href="#"><span>About</span></a></li>
      <li><a href="#"><span>Clients</span></a></li>
      <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
  </nav>

CSS

ul {
  width: 50%;
}

li {
  display: inline-block;
  margin-right: -4px;
  width: 25%;
}
li a {
  position: relative;
  border: 1px solid #919196;
  background-color: #00465a;
  box-sizing: border-box;
  padding: 1em;
  display: block;
  -moz-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  width: 100%;
  min-height: 3em;
  text-align: center;
}
li a span {
  color: white;
  position: absolute;
  box-sizing: border-box;
  -moz-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  left: 0;
  width: 100%;
}

.current a {
  background: #70cb00;
}

DEMO

Cosmos
  • 337
  • 1
  • 3
  • 13