首页>Program>source

我正在尝试创建一个带有4个按钮的导航div,一个按钮向左移动,一个按钮向右移动,另一个按钮向下移动,另一个按钮向上移动.另外,中间需要有一个确定按钮。

按钮的位置必须是它们形成任何(未设置大小)矩形的位置,按钮内部的位置应位于右侧,左侧,顶部和底部,并且每个都是梯形,并在其中保留一个正方形.确定按钮的中间。

就像这样:

我所做的是,我创建了一个梯形父级,并使用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是否没有能力满足我的要求?

最新回答
  • 2天前
    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>
    

    Note: 由于SVG中的每个元素都有一个ID,因此您应该可以使用JS / Jquery定位它们。

  • 2天前
    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; }
    

  • 2天前
    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>
    

    Screenshot (gif)


    Browser support: IE 9 +,GC 4 +,FF 3.5 +,Safari 3.1 +,Opera 11.5 +

  • 如何在两个不同的Perl脚本之间共享/导出全局变量?
  • class:如何通过命令行查看Java类文件的注释?