为 wordpress 主题创建一个圆形 css

Question

如何在顶部栏导航（尤其是注册菜单、登录菜单和购物车图标）中为我自己的自定义 wordpress 主题制作圆形 css，如下概念：

它的 style.css 仅用于顶部栏导航：

    .main-navigation2 {
    float: none;
    height: 50px;
    background: #fff;

}

.main-navigation2 ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation2 li {
    float: right;
    position: relative;
}

.main-navigation2 a {
    padding: 0 20px 0 20px;
    display: block;
    text-decoration: none;
    line-height: 50px;
    color: #000;
    font-family: sans-serif;
    background: #ff3400 url(img/arrow.png) no-repeat scroll right / 20% 20%;
}

.main-navigation2 ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation2 ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation2 ul ul a {
    width: 200px;
    line-height: 40px;
    padding: 0 20px;
    display: block;

}

.main-navigation2 ul ul li {

}

.main-navigation2 li:hover > a,
.main-navigation2 li.focus > a {
background: #e6370a;

}

.main-navigation2 ul ul :hover > a,
.main-navigation2 ul ul .focus > a {
}

.main-navigation2 ul ul a:hover,
.main-navigation2 ul ul a.focus {
}

.main-navigation2 ul li:hover > ul,
.main-navigation2 ul li.focus > ul {
    left: auto;
}

.main-navigation2 ul ul li:hover > ul,
.main-navigation2 ul ul li.focus > ul {
    left: 100%;
}

.main-navigation2 .current_page_item > a,
.main-navigation2 .current-menu-item > a,
.main-navigation2 .current_page_ancestor > a {
}


/* Small menu. */
.menu-toggle,
.main-navigation2.toggled ul,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }
    .main-navigation ul {
        display: block;
    }
    .main-navigation2 ul {
        display: block;
    }
}

我已经尝试了一切，但仍然没有运气

更新#1：

我已经在 style.css 中添加了“border-radius”代码，如下所示：

.main-navigation2 a {
padding: 0 20px 0 20px;
display: block;
text-decoration: none;
line-height: 50px;
color: #000;
font-family: sans-serif;
background: #ff3400 url(img/arrow.png) no-repeat scroll right / 20% 20%;
border-radius: 0px 0px 0px 124px;
-moz-border-radius: 0px 0px 0px 124px;
-webkit-border-radius: 0px 0px 0px 124px;
border: 6px solid #ffffff;
}

但还是不走运

Answer 1

使用border-radius 来制作你想要的圆形元素

例如。注册菜单：

border-radius: 0 0 0 50em;，最后一个图标应该是border-radius: 0 0 8px 0;

或者你可以使用像http://border-radius.com/、http://www.cssmatic.com/border-radius这样的边界半径生成工具