css - 拡張可能な非長方形のCSSボタン？

Question

オンラインで多くのことを調べた後、CSSを使用して送信ボタンのスタイルを設定するためのアドバイスや例をたくさん見つけましたが、それらはすべて長方形のボタンになります。ボタンの凡例に合わせて自動的にサイズが変更される非長方形のボタンを作成したいと思います。具体的には、ボタンを次のように表示します（プラスまたはマイナスの丸い角）。

助言がありますか？

Answer 1

<button>ボーダー半径で完全に可能ですが、要素の代わりに JavaScript で送信する必要があります。

例えば：

.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 を使用できます。