Arched Banner

Discussion in 'CSS' started by Category3, May 8, 2013.

  1. #1
    Hi there.

    I've only been a web developer from a few months now, and I have a fairly good idea of how to use CSS. I'm creating a website based off a design that was sent to me, and the design calls for an arched banner/menu at the top of the page.

    [​IMG]


    I was wondering if this was possible to do with CSS. Any help would be greatly appreciated!

    Thanks in advance,
    Jacob
     
    Category3, May 8, 2013 IP
  2. Krisism

    Krisism Member

    Messages:
    36
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #2
    Hi Category3,

    It is possible with a bit of css and some creative thinking :)

    Thanks to the oval shapes we can create with the css 'border-radius' - you can create an oval shape and overlay it on your top banner which would be rectangular. To ensure your oval stays on top of the other rectangle, use 'z-index.'

    http://css-tricks.com/the-shapes-of-css/ for some more about oval css; and,
    http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ for some more information about z-index.

    Good luck getting creative!

    Kris
     
    Krisism, May 9, 2013 IP
  3. Andre Glegg

    Andre Glegg Member

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    See this example
    http://cssdesk.com/heLYn
     
    Andre Glegg, Jun 3, 2013 IP