Creating a strange shape in CSS

问题

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

回答1:

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/

回答2:

If you add a span after the a tag you can create another arrow inside the li.

http://jsfiddle.net/2Cn3a/1/

<style>
span {
  position: absolute;
  float:left;
  background-color: transparent;
  border-color: transparent transparent transparent #393233;
  border-style: solid;
  border-width: 12px 12px 12px 23px;
}
</style>


<nav>
   <li>
     <a href="#">Hello</a>
     <span></span>
   </li>
</nav>

来源：https://stackoverflow.com/questions/24599961/creating-a-strange-shape-in-css