html - 말풍선 - css3 trick



CSS가 1 div 인 겹치는 원 (3)

CSS 상자 그림자로

둥근 div에서 여러 색상으로 여러 box-shadows 를 사용할 수 있습니다. 쉼표로 구분해야합니다.

#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로

또 다른 방법은 <circle> 요소와 함께 인라인 svg 를 사용하는 것입니다.
이것은 부모의 크기에 따라 반응하며 브라우저 지원은 상자 그림자와 같은 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 버전을 확장하여 겹치는 원이있는 애니메이션 "웜"을 만들었습니다. 이 펜에서 볼 수 있습니다 : 애니메이션 웜

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

https://src-bin.com

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

기본적으로 방금 쌓인 원입니다. 나는 주변을 둘러 보았고 내가 본 모든 솔루션에는이 효과에 여러 div 요소를 사용하는 것이 포함되어 있습니다. 그러나 CSS3을 사용하여 단일 div 로이 작업을 수행 할 수 없습니까? 나는 그것이 쉽게 이루어질 수있는 방법을 보았고 모든 색상이 동일하다면 알약 모양이 다음과 같을 것이라고 생각했습니다.

http://jsfiddle.net/5wytm0r4/

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

그리고 그 안에 두 개의 쿼터 문을 그리면됩니다. 그러나 캡슐 모양의 div 에서이 달 모양을 그리는 방법을 알 수 없습니다.


Answer #1

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


Answer #2

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>





css-shapes