CSS - 同心円

CSSで2つの同心円を作成したいと思います。内側のものは外側のものとコンパイルされた特定の幅を有する。 50％。これらのサークルは応答性が高く、すべての画面で適切に調整する必要があります。CSS - 同心円

どうすればいいですか？私はposition：絶対、javascriptまたはjQueryを使用しないことを好みます。私はそれが可能でなければならないと思う。

ありがとうございます！

enter image description here

出典

2013-12-14 user3103099

「適切に調整する」方法を指定できますか？彼らは彼らとの関係でどのような規模になるでしょうか？ – Guffa

サークルが何をすべきか、またはその点で完全な自由があることに制限がありますか？（イメージ、本当に大きなボーダー半径を持つ矩形、背景イメージを持つdivなど） – Josiah

内側の円が絶対位置を持つのは簡単です。なぜあなたはそれを使わないでしょうか？（私はスクリプトを使いたくないのですが、ポジションについての議論はありません...） – vals

ああ... SVGは助けることができますか？必要に応じて、あなたはそれの要素にCSSを使用することができますが、私はあなたが行うことができると思い、それ厳格かつシンプル：

<!DOCTYPE html > 
<html> 
    <head> 
    <title> Bla! </title> 
    </head> 
    <body> 
     <svg> 
      <circle cx="80" cy="80" r="40" fill='red' stroke-width="20" stroke='black'/ > 
     </svg> 
    </body> 
</html>

出典

2013-12-14 21:23:21

に従ってください。 CSSグラフィックスのより良い代替品のようだ。ブラウザのサポートはかなり良く見える –

http://jsfiddle.net/mG3KJ/1/

#outer { 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    border-radius: 50%; 
    background: black; 
} 
#inner { 
    width: 50%; 
    height: 50%; 
    background: white; 
    border-radius: 50%; 
    position: relative; 
    top: 25%; 
    left: 25%; 
}

出典

2013-12-14 21:31:00

ITは応答性がありますが、時には楕円です。それは常にこのように円にするhttp://jsfiddle.net/mG3KJ/2/ – vals

非常にいいですが、内部のCSSの割合を設定する簡単な方法はありますか？今はいつも50です。私はf.eが必要です。 1つは70％、75％、.. – user3103099

@ user3103099どういう意味ですか？単に割合を変更することはできますか？ –

ピュアCSS：

#container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 100%; 
} 

#circle { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
    border-radius: 50%; 
} 

#small-circle{ 
    margin-top: 25%; 
    margin-left: 25%; 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    background-color: #e5e5e5; 
    border-radius: 50%; 
}

とHTML ：

<div id="container"> 
    <div id="circle"> 
     <div id="small-circle"> 
     </div> 
    </div> 
</div>

Demo

出典

2013-12-14 22:28:19

CSS - 同心円

答えて

関連する問題