Jak zrobić kółko pojawiające się tylko w niektórych elementach div o różnych kolorach?

Question

Zasadniczo postaram się zachować to proste.

Staram się zrobić coś takiego (ignoruj ​​żadnych aspektów projektu, z wyjątkiem tego, co stan):

zacząłem to na JSFiddle here.

.header-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 
.header { 
 
    background-color: #0091cc; 
 
    border-radius: 20px; 
 
    height: 100px; 
 
    width: 90%; 
 
    margin-bottom: 20px; 
 
} 
 
.circle { 
 
    background-color: pink; 
 
    height: 400px; 
 
    width: 400px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: -100px; 
 
    left: -100px; 
 
}

<div class="header-wrapper"> 
 
    <div class="header"></div> 
 
    <div class="header"></div> 
 
</div> 
 

 
<div class="circle"></div>

Zasadniczo problem polega na tym, że nie mogę sprawić, by wyglądało na czapka okrąg łączy się przez dwa prostokąty i ma dwa różne kolory, jak na obrazku. Wciąż wycinając resztę koła, która wylewa się z prostokąta.

Mam nadzieję, że to ma sens.

Z góry dziękuję.

Answer 1

Musiałem zmienić twoją markę. Aby stary znak mógł zadziałać, byłby zbyt nieczuły. Zasadniczo przyporządkowałem okrąg do każdego nagłówka i ustawiłem przepełnienie do ukrytego w nagłówku. Następnie gram z najlepszą właściwością, aby zdecydować, która część koła chcę wyświetlić. Na granicy po lewej stronie widać lekki niebieski, ale jestem pewien, że nie trzeba długo czekać, aby zrozumieć, dlaczego.

.header-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 
.header { 
 
    background-color: #0091cc; 
 
    border-radius: 20px; 
 
    height: 100px; 
 
    width: 90%; 
 
    margin-bottom: 20px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.circle { 
 
    position: absolute; 
 
    top: -100px; 
 
    left: -100px; 
 
    height: 200px; 
 
    width: 200px; 
 
    border-radius: 200px; 
 
    background-color: #fff; 
 
} 
 

 
.circle.top { 
 
    top: 0; 
 
} 
 

 
.yellow { 
 
    background-color: yellow; 
 
} 
 

 
.pink { 
 
    background-color: pink; 
 
}

<div class="header-wrapper"> 
 
    <div class="header"> 
 
    <div class="circle top pink"></div> 
 
    </div> 
 
    <div class="header"> 
 
    <div class="circle yellow"></div> 
 
    </div> 
 
</div>

Answer 2

Rzeczywiście można to zrobić z nawet mniej HTML markeup i używać psuedo-elementowa ::before lub ::after tworzyć okręgu: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Stwarza to element podrzędny dla okręgu w każdym nagłówku i ustawieniu overflow:hidden w nagłówku ukrywa się części koła, które nie mają być widoczne.

.header-wrapper { 
 
    align-items: flex-end; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.header { 
 
    background-color: #0091cc; 
 
    border-radius: 20px; 
 
    height: 100px; 
 
    margin-bottom: 20px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 90%; 
 
} 
 

 
.header::after { 
 
    border-radius: 50%; 
 
    content: ""; 
 
    height: 400px; 
 
    left: -100px; 
 
    position: absolute; 
 
    width: 400px; 
 
} 
 

 
.header:nth-child(1)::after { 
 
    background-color: pink; 
 
    top: -100px; 
 
} 
 

 
.header:nth-child(2)::after { 
 
    background-color: orange; 
 
    bottom: -100px; 
 
}

<div class="header-wrapper"> 
 
    <div class="header"></div> 
 
    <div class="header"></div> 
 
</div>

https://jsfiddle.net/od62shsp/4/