使用CSS和HTML5使用梯形创建导航按钮 [英] Using CSS and HTML5 to create navigation buttons using trapezoids
问题描述
我试图做一个导航div与4个按钮，一个向左，一个向右，另一个向下，而另一个向上。另外，中间需要有一个OK按钮。
按钮需要是他们形成任何（大小未设置）矩形的位置，在按钮内是非常右，左，上和下的位置，并且每个都是梯形，在OK按钮的中间留下一个正方形。
：
've done is，that I created a trapezoid parent，with position relative shape using css：
.trapezoid_parent {
位置：相对;
}
使用梯形，这是绝对的。
.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;
}
使顶部的一个，我翻转正常的一个， top：
.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;宽度：100％; right：0; z-index：0;
}
然后，把它放在一起我使用下面的html：
< div class =trapezoid_parentstyle =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）
。 border-bottom-width，+（tph * internal_square_size）+px）;border-right-width，+（tpw * internal_square_size）+px
$（。left_button，.right_button，$ element）.css（width，+ internal_square_size * 100 +％）;
结果如下所示：
您可以在这里查看全部内容： full jsfiddle example
还有几个问题，我已经花了我所有的魔法，但也许有人有几个想法如何得到最后几件。
不能显示对角线边框所提出的方法，这是我不能与之一起。有人有想法吗？
其次：这将是非常好的，如果按钮可能实际上以对角线结束，因为触摸一个按钮是小的总是强硬。我缺少什么？是HTML5没有装备我做的事情吗？
正如我在评论中提到的，我想我会
svg {display：block; width：200px; height：200px; margin：25px auto; border：1px solid gray; stroke：＃006600;}＃buttons polygon：hover {fill：orange;}＃按钮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 =centerx =25y =25height =50width =50/> < polygon id =toppoints =0,0 100,0 75,25 25,25/> < polygon id =rightpoints =100,0 75,25 75,75 100,100/> < polygon id =bottompoints =0,100 25,75 75,75 100,100/> < polygon id =leftpoints =0,0 25,25 25,75 0,100/> < / g>< / svg>
注意：由于SVG中的每个元素都有ID，因此您应该可以使用JS / Jquery定位它们。
I'm trying to make a navigation-div with 4 buttons, one to go left, one to go right, another one to go down and yet another one to go up. Plus there needs to be an OK-button in the middle.
The buttons need to be positions that they form any (the size is not set) rectangle, inside the buttons are positions on the very right, left, top and bottom, and each of them are trapezoids, leaving a square in the middle for the OK-Button.
Just like that:
What I've done is, that I created a trapezoid parent, with position relative shape using css:
.trapezoid_parent {
position: relative;
}
And a trapezoid to use, which is absolute.
.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;
}
to make the top one, I flip the normal one and position it at the top:
.trapezoid.top {
transform: rotate(180deg);
top: 0;
}
the bottom trapezoid just has to be position on the bottom:
.trapezoid.bottom {
bottom: 0;
}
Next up we need the left button
.left_button {
height: 100%;
position: absolute;
width: 40%;
left:0;
z-index: 1;
border-right: 1px solid #000000;
}
the one one the right
.right_button {
height: 100%;
position: absolute;
width: 40%;
right:0;
z-index: 1;
border-left: 1px solid #000000;
}
and last but not least the one in the center:
.center_button {
height: 100%; position: absolute; width: 100%; right:0; z-index: 0;
}
Then, to put it all together I used the following 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>
To make the whole thing responsive I made jQuery plugin which changes the sizes accordingly. It does that, by changing the border-bottom, border-left and border-right properties according to the size of the parent:
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 + "%");
The result looks like this:
You can view the whole thing here: full jsfiddle example
There are still a few problems and I've spend all my magic already, but maybe someone else has a few ideas how to get the last few pieces.
The diagonal borders can not be displayed using the method presented, which is something I cannot live with. Has anyone an idea?
Second of all: It would be very nice, if the buttons could actually end with the diagonal, because touching a button which is to small is always tough. Am I missing something? Is HTML5 not equipped to do the thing I ask of it?
As I mentioned in the comments, I think I would be using an SVG here.
A brief example of the proposed structure.
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>
Note: As each of the elements inside the SVG has an ID, you should be able to target them with JS/Jquery.
这篇关于使用CSS和HTML5使用梯形创建导航按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
