css - 可扩展的非矩形 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。