Javascript 使用CSS和HTML5创建使用梯形的导航按钮

我正在尝试制作一个有4个按钮的导航div，一个向左，一个向右，另一个向下，还有一个向上。另外，中间需要一个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：

<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>

结果如下所示：

您可以在此处查看整个过程：

仍然有一些问题，我已经花掉了我所有的魔法，但也许其他人有一些想法如何得到最后几块

对角线边框无法使用所提供的方法显示，这是我无法接受的。有人有主意吗

---

第二：如果按钮可以以对角线结尾，那就太好了，因为触摸一个太小的按钮总是很难的。我错过什么了吗？HTML5还不能满足我的要求吗？

正如我在评论中提到的，我想我应该在这里使用SVG

拟议结构的简要示例

svg{
显示：块；
宽度：200px；
高度：200px；
保证金：25像素自动；
边框：1px纯灰；
行程：006600；
}
#按钮多边形：悬停{
填充物：橙色；
}
#按钮矩形：悬停{
填充：蓝色
}
#居中{
填充：#00cc00；
}
#顶{
填充：#cc3333；
}
#对{
填写：#663399；
}
#左{
填充：#bada55；
}

---

下面是旧版本，它使用jQuery调整大小。但在看了这个问题之后，您可以通过应用百分比而不需要任何JS来实现相同的效果：

<div id="svg-container">
    <svg id="mySVG" width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <polygon id="ok" points="25,25 75,25 75,75 25,75" />
        <polygon id="up" points="0,0 100,0 75,25 25,25" />
        <polygon id="right" points="100,0 100,100 75,75 75,25" />
        <polygon id="down" points="0,100 25,75 75,75 100,100" />
        <polygon id="left" points="0,0 25,25 25,75 0,100" />
    </svg>
</div>

CSS

---

正如其他人已经指出的，您应该为此使用SVG。下面是您可以使用的CSS替代方案

它使用转换后的伪元素和

转换原点

属性。要使其响应迅速，您需要更改单位。在这种方法中，由于单位在em中，只需更改父元素或body元素中的字体大小即可

正文{
字体大小：12px；
}
.左、.右、.上、.下、.确定{
高度：10公分；
宽度：10em；
位置：相对位置；
}
.左{
背景色：#FFBF00；
边缘顶端：10em；
}
.对{
背景色：#FF7E00；
边缘顶部：-10em；
左侧边缘：20em；
}
.顶{
背景色：#D3212D；
边缘顶部：-20em；
左边距：10em；
}
.底部{
背景色：#318CE7；
边缘顶端：10em；
左边距：10em；
}
.好的{
背景色：#3B444B；
保证金顶部：-21.666em；
左侧边缘：8.333em；
身高：13.33em；
宽度：13.33em；
}
.好的{
线高：6.666em；
文本对齐：居中；
宽度：继承；
显示：块；
字号：2em；
字体系列：无衬线；
颜色：白色；
字体大小：粗体；
}
.左：之前，.左：之后，.右：之前，.右：之后，.顶：之前，.顶：之后，.底：之前，.底：之后{
位置：绝对位置；
内容：“；
身高：继承；
宽度：继承；
背景色：继承；
}
.左：在之前..右：在之前{
-webkit变换：歪斜（45度）；
-moz变换：歪斜（45度）；
-ms变换：歪斜（45度）；
-o变换：歪斜（45度）；
变换：歪斜（45度）；
}
.顶部：之前，.底部：之前{
-webkit变换：skewX（45度）；
-moz变换：skewX（45度）；
-ms变换：skewX（45度）；
-o变换：斜交（45度）；
变换：skewX（45度）；
}
.左：后，.右：后{
-webkit变换：歪斜（-45度）；
-moz变换：歪斜（-45度）；
-ms变换：歪斜（-45度）；
-o变换：歪斜（-45度）；
变换：歪斜（-45度）；
}
.top:after..bottom:after{
-webkit变换：skewX（-45度）；
-moz变换：skewX（-45度）；
-ms变换：skewX（-45度）；
-o变换：斜交（-45度）；
变换：skewX（-45度）；
}
.左：之前，.左：之后，.下：之前，.下：之后{
-webkit转换来源：100%0%；
-moz变换原点：100%0%；
-ms变换原点：100%0%；
-o-变换原点：100%0%；
变换原点：100%0%；
}
.right:在之前，.right:在之后，.top:在之前，.top:在之后{
-webkit转换来源：0%100%；
-moz变换原点：0%100%；
-ms变换原点：0%100%；
-o-变换原点：0%100%；
变换原点：0%100%；
}
/*悬停样式*/
.top:hover、.right:hover、.bottom:hover、.left:hover、.ok:hover{background:#F7E7CE；transition:0.3s ease；}
.ok:悬停span{color:#222；}

好的

坦率地说，我会使用SVG。@Paulie_d我也想过，但我以前从未使用过SVG，你能告诉我如何使用SVG作为答案吗？这将是非常广泛和太长的问题，我想，但我会看看我能想出什么。谢谢你，我也有同样的想法让它具有响应性。在这种情况下，SVG确实是更好的选择。如果在SVG上使用%宽度，它会自动响应。-不确定您是否需要任何JS/JQ。@Paulie_D，对。我看到了这个问题并更新了代码。JS没有必要调整答案的大小。

display:block

对于

svg

有什么特别的优点吗？还是只对边距有效？我没有看到它在其他地方被使用，只是试图了解它是否有任何好处。不，这只是为了利润

<div id="svg-container">
    <svg id="mySVG" width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <polygon id="ok" points="25,25 75,25 75,75 25,75" />
        <polygon id="up" points="0,0 100,0 75,25 25,25" />
        <polygon id="right" points="100,0 100,100 75,75 75,25" />
        <polygon id="down" points="0,100 25,75 75,75 100,100" />
        <polygon id="left" points="0,0 25,25 25,75 0,100" />
    </svg>
</div>

<svg id="mySVG" height="20%" width="20%">
    <polygon id="ok" points="50,50 150,50 150,150 50,150" />
    <polygon id="up" points="0,0 200,0 150,50 50,50" />
    <polygon id="right" points="200,0 200,200 150,150 150,50" />
    <polygon id="down" points="0,200 50,150 150,150 200,200" />
    <polygon id="left" points="0,0 50,50 50,150 0,200" />
</svg>

function resizeButtons() {
    // get the width
    var w = $("#mySVG").width();

    // make it squared
    $("#mySVG").height(w);

    // recalculate the position of each polygon
    $("#ok").attr("points", w * 0.25 + "," + w * 0.25 + " " + w * 0.75 + "," + w * 0.25 + " " + w * 0.75 + "," + w * 0.75 + " " + w * 0.25 + "," + w * 0.75);
    $("#up").attr("points", "0,0 " + w + ",0 " + w * 0.75 + "," + w * 0.25 + " " + w * 0.25 + "," + w * 0.25);
    $("#left").attr("points", w + ",0 " + w + "," + w + " " + w * 0.75 + "," + w * 0.75 + " " + w * 0.75 + "," + w * 0.25);
    $("#down").attr("points", "0," + w + " " + w * 0.25 + "," + w * 0.75 + " " + w * 0.75 + "," + w * 0.75 + " " + w + "," + w);
    $("#right").attr("points", "0,0 " + w * 0.25 + "," + w * 0.25 + " " + w * 0.25 + "," + w * 0.75 + " 0," + w);
}

svg { background:#ccc; }
#ok { fill: red; }
#up { fill: blue; }
#down { fill: green; }
#right { fill: yellow; }
#left { fill: orange; }