Search code examples
htmlcssnavigationbarmenubardiagonal

is it possible to make a diagonal menu bar using css?

I wanted to make a diagonal menu bar for my blog but I just can't figure out how to do it. can any of you help please?

Something simple (like the one in the picture) that I can personalize myself according to my template :

image

Solution

  • Yep, it's possible to do that. You should be looking at this CSS3 property, transform, and then specify how much degree you want it to rotate.

    Example

    #myMenuBar {
    background-color:black;
    color:white;
    transform:rotate(-10deg);
    -ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
}

    Just be aware of the browser support when it comes to transform. You can find more details here: http://www.w3schools.com/cssref/css3_pr_transform.asp