css - CSSを使用して任意の半径を持つパイで中空球を作成しますか?

Question

私は、任意の半径を持つことができる別の色のパイで中空の球を作ろうとしています。たくさん検索しましたが、border-radius私がすでに知っているいくつかのプロパティを見つけましたがclip: rect(top, right, bottom, left). どうすればそれを使用できますか? チュートリアルを検索しましたが、チュートリアルは少し面倒で不完全です。

効果って具体的に何？

ウェブサイトへのリンク

4 色の中空球体がどのように見えるかをご覧ください。

また、stackoverflow もこのような質問で構成されていません。

Answer 1

そのパイ効果を作成するには、2 つの div が必要です。

<div id="parent">
    <div id="master">
    </div>
    <div id="slave">
    </div>
</div>

最初の div は元の球であり、純粋に で行うことができますborder-radius。

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
width:70px;
height:70px;
border-style:solid;
border-width:10px;
border-color:#573;

2 番目の div は明るい色になり、純粋にborder-radius.

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
width:70px;
height:70px;
border-style:solid;
border-width:10px;
border-color:#99FF33;

次に、 を使用しますclip:rect(0px,50px,50px,0px);。

ここで、 と を使用して位置を修正するだけですpostion:relative;。position:absolute;

CSS

#parent
{
    position:relative;
}
#master
{
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    width:70px;
    height:70px;
    border-style:solid;
    border-width:10px;
    border-color:#573;
}
#slave
{
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    width:70px;
    height:70px;
    border-style:solid;
    border-width:10px;
    border-color:#99FF33;
    position:absolute;
    top:0px;
    left:0px;
    clip:rect(0px,50px,50px,0px);
}

確認してください -デモ。

このBorder Radius Generator (円を作成するために使用) を確認してください。

アップデート

増減する方法を見つけましたが、2 つのスレーブ、同じ CSS プロパティが必要です。

bottomパーセンテージが 50% 以上の場合、2 番目のスレーブを非表示にし、最初のスレーブのを増減する必要があります。

clip:rect(0px,50px,20px,0px);

clip:rect(0px,50px,100px,0px);

円の半分が埋まったらshow、2 番目のスレーブを作成する必要があります。減らしたり増やしたりするには、 を変更する必要がありtopます。

clip:rect(60px,100px,100px,0px);

clip:rect(20px,100px,100px,0px);

確認してください -デモ

clip:rect(top,right,bottom,left);