8

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

境界線を反転したり、別の方法で必要な形状を作成したりするにはどうすればよいですか?

4

4 に答える 4

12

私は次のようなことをします：

http://dabblet.com/gist/5476973

要するに、たくさんの境界半径 + すべての上に白い円。

私の例では、JavaScript を使用してクリック イベントを div にバインドするか、<a>代わりにすべての要素を作成してdisplay:block;.

/**
* Quarter Circles
*/

.main {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.quarter {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: background-color 0.2s ease-in-out;
}
.quarter:hover {
  background-color: pink;
}
.quarter1 {
  top: 0;
  left: 0;
  background-color: red;
  border-radius: 100% 0 0 0;
}
.quarter2 {
  top: 0;
  right: 0;
  background-color: blue;
  border-radius: 0 100% 0 0;
}
.quarter3 {
  bottom: 0;
  left: 0;
  background-color: orange;
  border-radius: 0 0 0 100%;
}
.quarter4 {
  bottom: 0;
  right: 0;
  background-color: green;
  border-radius: 0 0 100% 0;
}
.cutout {
  width: 50%;
  height: 50%;
  background-color: white;
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  pointer-events: none;
}
<div class="main">
  <div class="quarter quarter1"></div>
  <div class="quarter quarter2"></div>
  <div class="quarter quarter3"></div>
  <div class="quarter quarter4"></div>
  <div class="cutout"></div>
</div>

于 2013-04-28T14:03:06.063 に答える
2

これが <svg> ソリューションです。

Svg には独自の <a> 要素 svg があります。
角を押すだけで、すばらしいドキュメントが見つかります ;)
ジョークはさておき リンクは形状で機能するため、形状はリンクを取得します。
これにより、形状内に空のスペースが残り、その背後にあるものが表示されます。

<svg width="150px" height="150px" viewbox="-1 -1 102 102">
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="tomato" fill="orange" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="darkRed" fill="red" transform="translate(100, 0) rotate(90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="DarkBlue" fill="blue" transform="translate(100, 100) rotate(180)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="darkGreen" href="#" fill="green" transform="translate(0, 100) rotate(-90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
</svg>

于 2015-05-08T14:36:39.053 に答える
1

最初の回答を強化し、マウスがカットオフ領域にあるときにリングが応答しないようにすることができました。

http://codepen.io/a-zaki/pen/rLRyAm

/**
* Quarter Circles
*/

.main {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.quarter {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: background-color 0.2s ease-in-out;
  z-index: 1;
}
.quarter:hover {
  background-color: pink;
}
.quarter1 {
  top: 0;
  left: 0;
  background-color: red;
  border-radius: 100% 0 0 0;
}
.quarter2 {
  top: 0;
  right: 0;
  background-color: blue;
  border-radius: 0 100% 0 0;
}
.quarter3 {
  bottom: 0;
  left: 0;
  background-color: orange;
  border-radius: 0 0 0 100%;
}
.quarter4 {
  bottom: 0;
  right: 0;
  background-color: green;
  border-radius: 0 0 100% 0;
}
.cutout {
  width: 50%;
  height: 50%;
  background-color: white;
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  border: 3px solid #000;
  z-index: 2;
}
<div class="main">
  <div class="quarter quarter1"></div>
  <div class="quarter quarter2"></div>
  <div class="quarter quarter3"></div>
  <div class="quarter quarter4"></div>
  <div class="cutout"></div>
</div>

于 2016-11-02T14:00:25.413 に答える