css で 4 つの四分の一に分割されたリング形状を作成しようとしています。各四半期はボタンを表します。
私は次のコードで遊んでいます:
#quarterCircleTopLeft{
width:100px;
height:100px;
border:1px solid #000;
background: orange;
border-radius: 90px 0 70px 0;
-moz-border-radius: 90px 0 70px 0;
-webkit-border-radius: 90px 0 70px 0;
}
これが生成されます(灰色の線は無視してください):
明らかに、右下の境界線を反転させたいです。ただし、これはボタンであるため、別の形状を使用してカットアウトを作成することはできません (メニューの他のボタンと重なってしまうため)。赤い線を追加して、境界線をどのようにしたいのかをおおよそ示しました。申し訳ありませんが、私のペイントスキルは悪いです:-P
境界線を反転したり、別の方法で必要な形状を作成したりするにはどうすればよいですか?