html5导航 按钮事件,javascript – 使用CSS和HTML5使用梯形创建导航按钮

我试图做一个导航div与4个按钮，一个向左，一个向右，另一个向下，而另一个向上。另外，在中间需要有一个OK按钮。

按钮需要是它们形成任何(不设置大小)矩形的位置，按钮内部是非常右，左，上和下的位置，并且它们中的每一个都是梯形，在中间留下一个正方形OK按钮。

就像这样：

我做的是，我创建了一个梯形的父，与位置相对的形状使用css：

.trapezoid_parent {

position: relative;

}

和一个梯形使用，这是绝对的。

.trapezoid {

position: absolute;

border-bottom: 50px solid #f98d12;

border-left: 80px solid transparent;

border-right: 80px solid transparent;

width: 100%;

height: 0;

z-index: 2;

border-top: 1px solid #000000;

}

使顶部的，我翻转正常的一个，并将其放置在顶部：

.trapezoid.top {

transform: rotate(180deg);

top: 0;

}

底部梯形只需要在底部的位置：

.trapezoid.bottom {

bottom: 0;

}

接下来我们需要左边的按钮

.left_button {

height: 100%;

position: absolute;

width: 40%;

left:0;

z-index: 1;

border-right: 1px solid #000000;

}

一个一个权利

.right_button {

height: 100%;

position: absolute;

width: 40%;

right:0;

z-index: 1;

border-left: 1px solid #000000;

}

和最后但不是最不重要的一个在中心：

.center_button {

height: 100%; position: absolute; width: 100%; right:0; z-index: 0;

}

然后，把它放在一起我使用下面的html：

OK

为了使整个事情响应我做了jQuery插件，相应地改变大小。它这样做，通过根据父级的大小更改border-bottom，border-left和border-right属性：

var internal_square_size = ((1.0 / 2) - plugin.settings.square_size);

var tpw = $element.width();

var tph = $element.height();

$(".trapezoid", $element)

.css("border-left-width", "" + (tpw * internal_square_size) + "px")

.css("border-right-width", "" + (tpw * internal_square_size) + "px")

.css("border-bottom-width","" + (tph * internal_square_size) + "px");

$(".left_button, .right_button", $element).css("width", "" + internal_square_size*100 + "%");

结果如下所示：

还有一些问题，我已经花了我所有的魔法，但也许有人有几个想法如何得到最后几件。

不能使用提供的方法显示对角线边框，这是我不能住的东西。有人有想法吗？

第二：这将是非常好的，如果按钮可能实际上以对角线结束，因为触摸一个按钮是小的总是艰难的。我缺少什么？是HTML5没有装备做我要问的东西吗？