Using CSS and HTML5 to create navigation buttons using trapezoids

Question

I\'m trying to make a navigation-div with 4 buttons, one to go left, one to go right, another one to go down and yet another one to go up. Plus there needs to be an OK-butto

Answer 1

As I mentioned in the comments, I think I would be using an SVG here.

A brief example of the proposed structure.

svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 25px auto;
  border: 1px solid grey;
  stroke: #006600;
}
#buttons polygon:hover {
  fill: orange;
}
#buttons rect:hover {
  fill: blue
}
#center {
  fill: #00cc00;
}
#top {
  fill: #cc3333;
}
#right {
  fill: #663399;
}
#left {
  fill: #bada55;
}

Note: As each of the elements inside the SVG has an ID, you should be able to target them with JS/Jquery.