Bir daire nasıl yapılır sadece farklı renklerdeki farklı divlarda görünür?

Question

Temel olarak bunu basit tutmaya çalışacağım. Böyle bir şey (Ben ne devlet dışında herhangi bir tasarım yönlerini görmezden) yapmaya çalışıyorum

:

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

JSFiddle bu başladık

Temel olarak sorun şu ki; dairenin iki dikdörtgen üzerinden bağlanması ve görüntüde olduğu gibi iki farklı renge sahip olması. Çemberin geri kalan kısmını keserken, bu dikdörtgenden dışarı akar.

Umarım bu mantıklıdır.

Şimdiden teşekkürler.

Answer 1

İşaretinizi değiştirmem gerekiyordu. Eski işaretin işe yaraması için çok haylaz olurdu. Temel olarak her başlık için bir daire atadım ve üstbilgide gizlenmek üzere taşma ayarlıyorum. Ardından, görüntülemek istediğim dairenin hangi kısmına karar vermek için en üstteki mülkle oynarım. Soldaki sınırda küçük bir mavi var, ama eminim ki bunun nedenini anlamak uzun sürmeyecek.

.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

Aslında ile yapabilirsiniz daha az HTML markeup ve çevre oluşturmak için bir ::before veya ::after psuedo elemanı kullanın: Bu bir daire için bir alt öğesi oluşturur https://developer.mozilla.org/en-US/docs/Web/CSS/::after

her başlıkta ve başlığa overflow:hidden ayarı, görünmesini istemediğiniz dairenin bölümlerini gizler.

.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/