Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating a strange shape in CSS

Creating a strange shape in CSS

Problem

I'm trying to create this shape in css.

I have gone as far as I can and I can't create the spike on the right hand side

Here is my CSS

nav li a {
    float: left;
    height: 23px;
    line-height: 24px;
    position: relative;
    padding: 1px 10px 0 24px;
    color: #fff;
    background-color: #393233;
    text-align: center;
    width:75%;
}
nav li a:before {
    content: "";
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-color: white #393233 white white;
    border-style: solid;
    border-width: 12px 12px 12px 12px;
  }
nav li a:after {
    content: "";
    float: left;
    position: absolute;
    top: 0;
    right: -12px;
    width: 0;
    height: 0;
    border-color: #393233 transparent #393233 #393233;
    border-style: solid;
    border-width: 12px 12px 12px 12px;
}

I have created a jsfiddle to express my code.

http://jsfiddle.net/2Cn3a/

Any help is much appreciated

Problem courtesy of: Wiseguy

Solution

One solution would be to use li instead of li a as relative element, so you can add one more :after to it as well. See it in action: http://jsfiddle.net/z47fN/

Solution courtesy of: c69

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating a strange shape in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×