web-dev-qa-db-ja.com

1 divのCSSで重複する円

私はCSSでこの重なり合う円の形を作成しようとしています：

Desired overlapping cicles shape

基本的には、円を重ねるだけです。私は周りを見回しましたが、私が目にするすべてのソリューションには、この効果のために複数のdiv要素を使用することが含まれています。ただし、CSS3を使用して、これを単一のdivで行うことはできませんか？私はそれが簡単にできる方法を見て、すべての色が同じであれば、次のような錠剤の形になると考えました。

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }
<div id="circles"></div>

そして、そこにクォータームーンを2、3個描画するだけで完了です。しかし、カプセル型のdivでこれらの月の形を描画する方法がわかりません。

htmlcsssvgcss-shapes
60
yesman

CSSボックスシャドウ付き

複数の box-shadows を使用して、丸いdivで複数の色を指定できます。それらはコンマで区切る必要があります：

#circles {
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 10px 0 0 -2px #f8ff00,
              20px 0 0 -4px #009901,
              30px 0 0 -6px #3531ff;
}
<div id="circles"></div>

出力：

CSS orvelapping circles

ボックスシャドウのブラウザサポートはIE9 +です（詳細は canIuse を参照）

vw unitsを使用して、ビューポートの幅に応じて、重なり合う円の形状をレスポンシブにすることもできます：[〜＃〜] demo [〜＃〜]

#circles {
  background-color: red;
  width: 20vw;
  height: 20vw;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 2vw 0 0 -0.4vw #f8ff00, 
              4vw 0 0 -0.8vw #009901, 
              6vw 0 0 -1.2vw #3531ff;
}
<div id="circles"></div>

VwユニットのブラウザサポートはIE9 +です（詳細は canIuse を参照）

SVGを使用

別のアプローチは、インラインsvgを <circle> 要素。
これは、親のサイズに応じて応答します ブラウザのサポートはIE9に戻ります box-shadowsのように：

svg{width:80%;}
<svg viewbox="0 0 100 30">  
  <circle cx="59" cy="15" r="8.5" fill="darkorange" />
  <circle cx="56" cy="15" r="9" fill="gold" />
  <circle cx="53" cy="15" r="9.5" fill="tomato" />
  <circle cx="50" cy="15" r="10" fill="teal" />
</svg>

また、SVGバージョンを拡張して、円がより重なるアニメーション「ワーム」を作成しました。あなたはこのペンでそれを見ることができます： アニメーション化されたワーム

そしてそれはこのように見えます：

Animated worm made of overlapping circles

108
web-tiki

CSS3複数の背景画像 と 放射状グラデーション を一緒に使用することができます。

#circles {
  width: 115px;
  height: 100px;
  background-image:
    radial-gradient(circle at 50px 50px, #F00 0, #F00 50px, transparent 50px),
    radial-gradient(circle at 55px 50px, #FF0 0, #FF0 50px, transparent 50px),
    radial-gradient(circle at 60px 50px, #080 0, #080 50px, transparent 50px),
    radial-gradient(circle at 65px 50px, #00F 0, #00F 50px, transparent 50px);
}
<div id="circles"></div>
10
Salman A

または、気が狂っている場合は、svgを作成して、インラインで背景画像として使用できます。

#circles {
  width: 120px;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle fill='blue'  cy='50' cx='70' r='50' /><circle fill='green'  cy='50' cx='65' r='50' /><circle fill='yellow'  cy='50' cx='60' r='50' /><circle fill='red'  cy='50' cx='55' r='50' /></svg>");
}
<div id="circles"></div>
6
VerticalGrain

:: beforeおよび:: afterのような疑似セレクターでこれを実現できます。jsfiddle https://jsfiddle.net/zakirshaik/jL78m9d1/6/ を見つけることができます。

コードにシャドウを追加して、円の数を増やすことができます。

.circle-overlaping{
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position:relative;
}

.circle-overlaping::before{
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  background-color: yellow;
  width: 100px;
  height:100px;
  border-radius: 50%;
}

.circle-overlaping::after{
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  background-color: blue;
  width: 100px;
  height:100px;
  border-radius: 50%;
}
<div class="circle-overlaping">

</div>
1
zakir