可扩展的非矩形CSS按钮？

Question

经过大量的在线讨论后，我发现了许多使用CSS来设置提交按钮样式的建议和示例，但它们都会产生矩形按钮。我想创建一个非矩形按钮，自动调整大小以适应按钮图例。具体来说，我希望按钮看起来像这样（加上或减去圆角）：

有什么建议吗？

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/

Answer 2

您可以使用CSS边框三角形技巧：http://css-tricks.com/snippets/css/css-triangle/

你可以使用svg。