Я пытаюсь сделать навигационный 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 неспособным делать то, что я прошу об этом?
