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 로이 작업을 수행 할 수 없습니까? 나는 그것이 쉽게 이루어질 수있는 방법을 보았고 모든 색상이 동일하다면 알약 모양이 다음과 같을 것이라고 생각했습니다.
#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>
