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

Question

我正在尝试制作一个带有 4 个按钮的 navigation-div，一个向左，一个向右，一个向下，一个向上。另外中间要有一个OK-button.

按钮需要在任意一个（大小不定）长方形的位置，按钮里面有最右、最左、最上、最下的位置，每一个都是梯形，剩下一个正方形在中间为 OK-Button.

就像那样：

我所做的是，我创建了一个梯形父级，其位置相对形状使用 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 插件来相应地改变大小。它通过根据父级的大小更改 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 + "%");

结果如下所示：

您可以在此处查看全部内容：full jsfiddle example

还有一些问题，我已经用尽了我所有的魔法，但也许其他人有一些关于如何获得最后几块的想法。

使用介绍的方法无法显示对角线边框，这是我不能接受的。有人有想法吗？

其次：如果按钮实际上可以以对角线结尾，那就太好了，因为触摸一个太小的按钮总是很困难。我错过了什么吗？ HTML5 没有能力完成我要求的事情吗？

Answer 1

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

建议结构的简要示例。

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

<svg viewbox="0 0 100 100">
  <g id="buttons">
    <rect id="center" x="25" y="25" height="50" width="50" />
    <polygon id="top" points="0,0 100,0 75,25 25,25" />
    <polygon id="right" points="100,0 75,25 75,75 100,100" />
    <polygon id="bottom" points="0,100 25,75 75,75 100,100" />
    <polygon id="left" points="0,0 25,25 25,75 0,100" />
  </g>
</svg>

注意： 由于 SVG 中的每个元素都有一个 ID，您应该可以使用 JS/Jquery.

来定位它们

Answer 2

旧版本如下，使用jQuery调整大小。但是看了这个问题后：SVG polygon points with percentage units support，你可以通过应用百分比来达到同样的效果，而不需要任何 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>

看到它在这里工作：http://jsfiddle.net/th4uo8wk/4/

旧答案：

糟糕，当我准备好时，Paulie_D 已经给出了答案。

嗯，这里有一个响应式的（您可以 see it working on this jsfiddle，调整屏幕大小以查看它响应式工作）：

HTML:

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

JS/JQUERY

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);
}

CSS

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

Answer 3

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

它使用转换后的伪元素和transform-origin 属性。要使其响应，您需要更改单位。由于在这种方法中单位是 em，只需更改父元素或 body 元素中的字体大小。

Fiddle

body {
    font-size: 12px;
}
.left, .right, .top, .bottom, .ok {
    height: 10em;
    width: 10em;
    position: relative;
}
.left {
    background-color: #FFBF00;
    margin-top: 10em;
}
.right {
    background-color: #FF7E00;
    margin-top: -10em;
    margin-left: 20em;
}
.top {
    background-color: #D3212D;
    margin-top: -20em;
    margin-left: 10em;
}
.bottom {
    background-color: #318CE7;
    margin-top: 10em;
    margin-left: 10em;
}
.ok {
    background-color: #3B444B;
    margin-top: -21.666em;
    margin-left: 8.333em;
    height: 13.33em;
    width: 13.33em;
}
.ok span {
    line-height: 6.666em;
    text-align: center;
    width: inherit;
    display: block;
    font-size: 2em;
    font-family: sans-serif;
    color: white;
    font-weight: bold;
}
.left:before, .left:after, .right:before, .right:after, .top:before, .top:after, .bottom:before, .bottom:after {
    position: absolute;
    content: "";
    height: inherit;
    width: inherit;
    background-color: inherit;
}
.left:before, .right:before {
    -webkit-transform: skewY(45deg);
    -moz-transform: skewY(45deg);
    -ms-transform: skewY(45deg);
    -o-transform: skewY(45deg);
    transform: skewY(45deg);
}
.top:before, .bottom:before {
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    -ms-transform: skewX(45deg);
    -o-transform: skewX(45deg);
    transform: skewX(45deg);
}
.left:after, .right:after {
    -webkit-transform: skewY(-45deg);
    -moz-transform: skewY(-45deg);
    -ms-transform: skewY(-45deg);
    -o-transform: skewY(-45deg);
    transform: skewY(-45deg);
}
.top:after, .bottom:after {
    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    transform: skewX(-45deg);
}
.left:before, .left:after, .bottom:before, .bottom:after {
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.right:before, .right:after, .top:before, .top:after {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
/*HOVER STYLES*/
.top:hover, .right:hover, .bottom:hover, .left:hover, .ok:hover {background: #F7E7CE; transition: 0.3s ease;}
.ok:hover span {color: #222;}

<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="ok"><span>OK</span></div>

屏幕截图 (gif)

浏览器支持： IE 9+、GC 4+、FF 3.5+、Safari 3.1+、Opera 11.5+

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

Using CSS and HTML5 to create navigation buttons using trapezoids

html

javascript

css

css-shapes