CSS에서 1div가있는 겹치는 원

CSS에서 1div가있는 겹치는 원

---

CSS에서이 겹치는 원 모양을 만들려고합니다.

기본적으로 스택 원입니다. 나는 둘러 보았고 내가 보는 모든 솔루션에는이 효과를 위해 여러 div 요소를 사용하는 것이 포함됩니다. 그러나 CSS3를 사용하여 단일 div로이 작업을 수행 할 수 없습니까? 나는 그것이 어떻게 쉽게 할 수 있는지 살펴 보았고 모든 색상이 동일하면 다음과 같은 알약 모양을 가질 것이라고 생각했습니다.

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }

<div id="circles"></div>

그리고 그 안에 몇 개의 4 분의 1 달을 그리면 끝입니다. 그러나 캡슐 모양의 div에서 이러한 달 모양을 그리는 방법을 알 수 없습니다.

---

CSS 상자 그림자 사용

둥근 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>

출력 :

상자 그림자에 대한 브라우저 지원은 IE9 +입니다 (자세한 내용은 canIuse 참조 ).

---

vw 단위 를 사용하여 뷰포트의 너비에 따라 겹치는 원 모양을 반응 형으로 만들 수도 있습니다 . 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>입니다.
이것은 부모의 크기에 따라 반응하며 브라우저 지원은 box-shadows와 같이 IE9로 돌아갑니다 .

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 버전을 확장하여 원이 더 겹치는 애니메이션 "웜"을 만들었습니다. 이 펜에서 볼 수 있습니다 : 애니메이션 웜

그리고 다음과 같이 보입니다.

---

사용할 수 있습니다 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>

---

또는 기분이 좋지 않다면 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>

---

:: 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>

참고 URL : https://stackoverflow.com/questions/27314373/overlapping-circles-in-css-with-1-div