Question

I’ve been staging up a site and building the basic layout when I ran into a little problem. I want to create a “notched” navigation, but I don’t know the first thing about doing this.

I’ve tried to create a to be positioned below my (with the idea that I could either create [with CSS or using an image] a white triangle) that could be aligned with the bottom of my creating the “notched” effect. I’ve yet to be successful with this and was hoping someone with css // html wizard status skills could be of assistance.

ps. If you need more info just let me know – I’m a bit new to stackoverflow

Answer 1

Cappuccino is using the following css to mark the link tag.

<style>
        #navmarker {
        width: 1px;
        height: 0;
        position: relative;
        margin-top: -0.7em;
        margin-left: auto;
        margin-right: auto;
        border-bottom: #FFD48E solid 0.8em;
        border-top: none;
        border-left: transparent solid 0.8em;
        border-right: transparent solid 0.8em;
        }

        div {
            display: block;
        }
    </style>

Try to create a div and use the above css it worked for me.

    <div id="navmarker"></div>