css - CSS: 4 色で div が 1 つだけの円

Question

純粋な CSS を使用して、4 つの異なる色 (四半期ごとに 1 つ) の円を作成することは可能ですか? 次の 4 つの円のいずれかのようなものが必要です。

[残念ながらリンク先の画像はもう存在しません。私が求めていた効果を理解するために答えを見てください]

4 つの div と border-radius を持つソリューションを使用することは想像できますが、これは 1 つの div と派手な css3 だけを使用して可能ですか?

Answer 1

CSS は次のようになります。

div {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
    background-size: 50% 50%;
    background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
    background-repeat: no-repeat;
}

デモ

そして境界半径で：

デモ 2

別の方法

.quarters {
    width: 101px;
    height: 101px;
    border-radius: 50%;
    position: relative;
}

.quarters:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),                   
                linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
    background-size: 50% 100%, 100% 50%;
    background-position: 100% 0%, 0% 100%;
    background-repeat: no-repeat;
  
}

#red {
    background-color: red;
}
#blue {
    background-color: blue;
}
#green {
    background-color: green;
}
#yellow {
    background-color: yellow;
}

円が同じ色の異なる色合いを持つ OP 画像の行では、ベース div の上にオーバーレイを設定するクラスを定義する可能性があります。これらは両方とも半透明です。そのクラスを定義したら、それをさまざまな色要素に簡単に適用して、手間をかけずに同じ効果を得ることができます

デモ 3

Answer 2

これはどう：

http://jsbin.com/uletik/1/edit

たった1つのdiv。

div {
  height:100px;
  width:100px;
  border-radius:100px;
 background: -webkit-linear-gradient(left, grey, grey 50%, blue 50%, blue);
  overflow:hidden;
  position:relative;
}
div:after {
  content:"";
  height:50px;
  background-color:red;
  width:50px;
  display:block;
}
div:before {
  content:"";
  background-color:green;
  height:50px;
  width:50px;
  display:block;
  right:0;
  position:absolute;
}