How can I make 2 divs with a slash between I want make a menu like the image but I don't know how to cut the two divs and make it clickable.
I have tried with svg and borders on divs but I can't get the divs nor svg together because the "outline" still a rectangle!
the image example its on this link:
http://postimg.org/image/ffp6g83fd/537cb837/
I only can make this :
|   *****
******* |  ******
******  | *******
*****   |

and I want :

 *****
******* ******
****** *******
***** 

and make them clickable
this was my result based on Hugo Marabutt Nogueira answer
http://jsfiddle.net/L7PL4/

Here's one way to do it without too much extra cruft. This uses borders and some css transforms to make the angles.
JSFiddle

CSS
* {
    padding: 0;
    margin: 0;
}
.container {
    width: 100%;   
    height: 50px;
}
.left,
.right {
    float: left;
}

.left span,
.right span {
    position: absolute;
    line-height: 50px; // equal to height of element
}

.left {
    width: 25%; // change as needed
    border-bottom: 50px solid blue;
    border-right: 50px solid transparent;
    -webkit-transform: rotateX(180deg);
}

.left span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotateX(-180deg); // opposite of skew
}

.right {
    width: 25%;
    border-bottom: 50px solid green;
    border-right: 50px solid transparent;
    -webkit-transform: rotate(180deg) rotateX(180deg);
}

.right span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotate(-180deg) rotateX(-180deg);
}

Just make sure to unskew the text by using the opposite transforms on them. You'll also have to use all the appropriate vendor prefixing for transforms.

You can use a negative margin to make the element overlap. Example:
margin-right: -5px;


You can use CSS3 Transitions to achieve that shape and then bind a js click to them.
Like this :
http://cdpn.io/stHdg
.skew{
  background-color: #333;
  width:150px;
  height:75px;
  float:left;
  position:relative;
  margin-left:100px;
  margin-top:50px;
  cursor:pointer;
}
.a:before{
    content:"";
    position:absolute;
    background: #333;
    top:0;
    left:-25px;
    bottom: 0;
    width: 50px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
}
.b:after{
    content:"";
    position:absolute;
    background: #333;
    top:0;
    right:-25px;
    bottom: 0;
    width: 50px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
}