Javascript 圆到圆角三角形（菜单按钮切换）

我试图创建一个圆形的菜单按钮，当你点击时，它会变成一个圆形的三角形，菜单就会下来。目前，虽然我已经能够添加圆角三角形，但似乎无法使其成为一个圆形而不影响三角形的最终外观。当我在原始正方形上应用50%的边界半径时，它会使圆角三角形变成此

[puu.sh]http://puu.sh/gZ6e9/b5d03cd612.png.[puu.sh]

它是一个菜单按钮，其工作原理与使用jscript的大多数汉堡按钮相同。 唯一的问题是，a不知道如何使它成为一个圆开始，没有50%的边界半径也适用于圆角三角形

我不太懂javascript编码，但我知道css和html

我把所有的东西都放在codepen

[codepen]http://codepen.io/Kiwimoose/pen/PwgBdB [codepen]

如果有人对如何修复它有任何想法，我们将不胜感激

<div class="container" >





<a href="#menu" id="toggle"><span></span></a> <!--hamburger button-->

<div id="menu" title="menu"> <!--Menu and items in the menu-->
    <ul>
            <li><a href="#" >1</a></li>
        <li><a href="#" >2</a></li>
        <li><a href="#" >3</a></li>
        <li><a href="#" >4</a></li>
    </ul>
</div>

---

这将根据您的尺寸形成一个圆

    border-radius: 75px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;

---

您可以使用transform和active向此添加事件，以便在三角形和圆之间切换

当

#toggle

元素没有类

.on

时，仅应用

边界半径：50%

。为此，只需将

边界半径：0

应用到

#toggle.on

即可覆盖

边界半径：50%

以下是更新后的代码笔：

---

非常感谢你！我相信知道这一点以后一定会派上用场。很高兴能帮上忙！如果你愿意，你可以通过将我的答案标记为正确来回报我。请在问题中输入你的相关代码，而不是链接。对不起，这是我第一次发帖，我不太确定一开始如何让它工作。不过我现在知道下次了！NP你仍然应该编辑和更新你的问题，虽然对于Prosperiti，我也尝试添加CSS，但这似乎不起作用。

    border-radius: 75px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;

#toggle span,
#toggle span:after,
#toggle span:before {
    width: 100%;
    height: 100px;
    background-color: #9fe8b7;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 50%;  
}

#toggle.on span,
#toggle.on span:after,
#toggle.on span:before {
    border-radius: 0; /* Insert this */
}