HTMLとCSSを使ってWebページにボタンを作成できるようにしたいです。ボタンは、片側が長方形で反対側が円形など、非標準的な形状にする必要があります。
最初の質問はそれを行う方法であり、2番目の質問は、丸い境界線の少し外側をクリックした場合にクリックできないようにする方法です. ボタンを円形にするCSSコードは次のとおりです。
.buttons
{
height: 50px;
width: 50px;
border-radius: 50px;
border: 1px solid #000;
}
このコードを試して、ボタンの円形領域の外側をクリックするとクリックされますが、境界線の内側をクリックしないとクリックできないようにします。
これはあなたの管理外です。要素に適用するときは、必ずボックス モデルでは長方形のままです。適用しているのは、丸みを帯びたように見せるborder-radius別のレンダリング スタイルだけです。標準では、これが要素のクリック領域に対して何を意味するかも指定されていません。
最近の一部のブラウザーborder-radiusはクリック領域を尊重しているように見えますが、それを実装するかどうかはブラウザーのベンダー次第であり、ユーザーがクリックした場所を計算するために Javascript をハッキングしない限り、決定的な影響を与えることはできません。
この Fiddleで試してみましたが、結果は面白いです:
前述のように、標準では未定義の動作であるため、機能する場合はおまけと考えてください。
You can't control such thing in HTML. As @Niels said, It's up to the vendor.
However, I think you can do that in SVG.