我正在尝试制作一个导航div，其中包括4个按钮，一个向左、一个向右、一个向下和另一个向上。此外，在中间还需要一个确定按钮。
按钮需要定位，以形成任何矩形（大小未设置）。在按钮内部，位置分别在右侧、左侧、顶部和底部，并且它们各自是梯形，留下一个正方形供确定按钮使用。
就像这样：
我所做的是创建了一个梯形父元素，使用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：
<div class="trapezoid_parent" style="width:200px; height:125px">
<button class="left_button function"><i class='fa fa-arrow-left'></i></button>
<button class="trapezoid top function"><i class='fa fa-arrow-down'></i></button>
<button class="trapezoid bottom function"><i class='fa fa-arrow-down'></i></button>
<button class="right_button function"><i class='fa fa-arrow-right'></i></button>
<button class="center_button">OK</button>
</div>
为了使整个事情具有响应性，我制作了一个 jQuery 插件，可以根据父元素的大小相应地更改边框下部、左侧和右侧属性来调整大小：
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 + "%");
结果看起来像这样：
您可以在此处查看完整的内容：完整的jsfiddle示例
仍然存在一些问题，而我已经花费了所有的努力，但也许其他人有一些想法如何获取最后几个部分。
使用所提供的方法无法显示对角线边框，这是我无法接受的。有人有想法吗？
其次：如果按钮实际上可以以对角线结束，那将非常好，因为触摸太小的按钮始终很棘手。我错过了什么吗？ HTML5不能完成我要求的事情吗？
