css - 可扩展的非矩形 CSS 按钮？

Question

在网上大量搜索之后，我找到了很多关于使用 CSS 来设置提交按钮样式的建议和示例，但它们都生成了矩形按钮。我想制作一个自动调整自身大小以适合按钮图例的非矩形按钮。具体来说，我希望按钮看起来像这样(加上或减去圆 Angular ):

有什么建议吗？

Answer 1

使用边框半径完全可行，但您必须使用 JavaScript 而不是 <button> 提交元素。

例如:

.icon {
background-color: lightblue;
width: 100px;
padding: 4px;
margin: 10px;

border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;

border-top-right-radius: 60px 22px;    
-moz-border-radius-topright: 60px 22px;   
border-bottom-right-radius: 60px 22px;   
-moz-border-radius-bottomright: 60px 22px;
}

品牌:

现场观看:

http://jsfiddle.net/9zamA/