Javascript 需要帮助来创建带有过渡的多边形导航样式吗

有谁能帮我在不同的浏览器上使多边形导航更准确吗？因为它在Chrome上工作，但在Firefox上看起来很难看，不支持IE。有谁能帮我添加一些jQuery/css3代码，让它至少在Chrome和Firefox中工作吗。建议一些代码使其更好。。非常感谢。 HTML标记：

  <div id="left_rot"></div>
  <div id="str"></div>
  <div id="right_rot"></div>
  <div id="nav">
    <input type="checkbox" id="switch" name="switch" class="chkbx">
    <label for="switch" class="pin"><span class="open">Open</span>
    <span class="close">Close</span> Menu</label>   
    <span class="link1"><a href="#link1">Link1</a></span>
    <span class="link2"><a href="#link2">Link2</a></span>
    <span class="link3"><a href="#link3">link3</a></span>
    <span class="link4"><a href="#link4">link4</a></span>
    <span class="link5"><a href="#link5">link5</a></span>
    <span class="link6"><a href="#link6">link6</a></span>
 </div>  

打开
关闭菜单

---

css的fiddle链接：

我在你的项目上做了工作，改变了两件事

我已经更改了您的HTML，主要是将类link1、link2等更改为类link1和ids link2 link3。。这使得代码更加紧凑，因为我可以为所有链接设置共享属性

另外，我已经改变了你定位三角形的方式。我没有用“上”和“左”来为它们中的每一个设置位置，而是以相同的方式对它们进行定位。然后，我旋转它们，旋转中心在三角形的下垂线处。这使得它们的定位更加容易

修改后的HTML是

<div id="nav">
    <!-- Option for Opening or Closing menu -->
    <input type="checkbox" id="switch" name="switch" class="chkbx">
    <label for="switch" class="pin"><span class="open">Open</span><span class="close">Close</span> Menu</label> 
    <!-- Links -->
    <span class="link" id="link1"><a href="#link1">Link1</a></span>
    <span class="link" id="link2"><a href="#link2">Link2</a></span>
    <span class="link" id="link3"><a href="#link3">link3</a></span>
    <span class="link" id="link4"><a href="#link4">link4</a></span>
    <span class="link" id="link5"><a href="#link5">link5</a></span>
    <span class="link" id="link6"><a href="#link6">link6</a></span>

</div>

我有remover前缀属性，现代浏览器不需要这些属性来保持示例的简短。它在最新的Chrom、Firefox和IE中工作正常

* {
    margin: 0;
    padding: 0;
}
body {
    background:#3498DB;
}
#nav {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 350px auto;
    position: absolute;
    text-align:center;
}
#left_rot {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
#right_rot {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
#str {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    text-align: center;
}
span {
    z-index:555 !important;
}
span a {
}
span a:hover {
    background:rgba(0, 0, 0, .1);
    box-shadow:inset 0 0 4px 0px rgba(0, 0, 0, .2);
}
.link a {
    margin-left: -80px;
    top:-142px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    background:transparent;
    color:#fff !important;
    padding: 0px;
    position:absolute;
    text-shadow:0 2px 1px rgba(0, 0, 0, .2);
    -webkit-transition: all ease 0.50s;
    transition: all ease 0.50s;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    height: 140px;
    width: 162px;
}
#link2 a {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
#link3 a {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}
#link4 a {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#link5 a {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
}
#link6 a {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
}
.link a:before {
    position: absolute;
    content:'';
    width:0;
    height:0;
    top:0;
    left:0;
    border-style:solid;
    border-width: 140px 81px 0px 81px;
    border-color:transparent;
    border-top-color: #fff;
    margin:0px;
    z-index:5;
    -webkit-transition: all 0.55s linear;
    transition: all 0.55s linear;
}
#link2 a:before, #link4 a:before, #link6 a:before {
    border-top-color: #ECF0F1; 
}
.chkbx {
    display: none;
    margin: 0px auto;
}
.pin {
    display: block;
    width: 200px;
    padding: 10px 25px;
    font-family: century gothic;
    background:rgba(252, 252, 252, 1);
    position: fixed;
    top: -300px;
    left: 0;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    color: #666;
    position: relative;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.chkbx:checked ~ .pin {
    color: #fff;
    background: rgba(252, 252, 252, .5);
}
.chkbx:checked ~ .link a:before {
    border-color: transparent !important;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.close {
    display: none;
}
.chkbx:checked ~ .pin span.close {
    display: inline-block !important;
}
.chkbx:checked ~ .pin span.open {
    display: none !important;
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
footer h2, p {
    font-family: century gothic;
    color: #fefefe;
}
footer p a {
    text-decoration: none;
    font-weight: bold;
    color: #1f2f3f;
}