Использование CSS и HTML5 для создания кнопок навигации с использованием трапеций

Я пытаюсь сделать навигационный 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>

Чтобы сделать все это отзывчивым, я создал плагин 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 + "%");

Результат выглядит следующим образом:

Вы можете просмотреть все это здесь: полный пример jsfiddle

Есть еще несколько проблем, и я уже потратил всю свою магию, но, возможно, у кого-то есть несколько идей, как получить последние несколько частей.

Диагональные границы не могут отображаться с использованием представленного метода, с которым я не могу жить. У кого-нибудь есть идея?

Во-вторых: Было бы очень приятно, если бы кнопки действительно могли заканчиваться диагональю, потому что касание кнопки, которая является маленькой, всегда жесткая. Я что-то упускаю? Является ли HTML5 неспособным делать то, что я прошу об этом?

Ответы

Ответ 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>

Ответ 2

Старая версия ниже, она изменяет размер с помощью jQuery. Но посмотрев на этот вопрос: точки полигона SVG с поддержкой процентных единиц, вы можете добиться такого же эффекта, применяя проценты и не нуждаясь в 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 пришел с ответом.

Ну, здесь у вас есть отзывчивый (вы можете видеть, как он работает над этим 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; }

Ответ 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>