Cách tạo vòng tròn chỉ xuất hiện trong các div nhất định có màu khác nhau?

Question

Về cơ bản, tôi sẽ cố gắng giữ điều này đơn giản.

Tôi cố gắng để làm một cái gì đó như thế này (bỏ qua bất kỳ khía cạnh thiết kế, ngoại trừ những gì tôi nêu):

Tôi đã bắt đầu này trên 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>

Về cơ bản vấn đề là tôi không thể làm cho nó xuất hiện mũ vòng tròn kết nối thông qua hai hình chữ nhật và có hai màu sắc khác nhau, giống như trong hình ảnh. Trong khi vẫn cắt phần còn lại của vòng tròn, nó tràn ra khỏi hình chữ nhật.

Tôi hy vọng điều này có ý nghĩa.

Xin cảm ơn trước.

Answer 1

Tôi phải thay đổi nhãn hiệu của bạn. Để có được dấu hiệu cũ để làm việc, nó sẽ là quá hacky. Về cơ bản, tôi đã gán một vòng tròn cho mỗi tiêu đề và tôi đã đặt tràn để ẩn trên tiêu đề. Sau đó, tôi chơi với thuộc tính hàng đầu để quyết định phần nào của vòng kết nối mà tôi muốn hiển thị. Có một chút màu xanh hiển thị trên biên giới bên trái, nhưng tôi chắc chắn sẽ không mất nhiều thời gian để tìm ra lý do.

.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

Bạn thực sự có thể làm điều này với thậm chí ít hơn HTML markeup và sử dụng một psuedo-yếu tố ::before hoặc ::after để tạo ra các vòng tròn: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

này tạo ra một phần tử con cho một vòng tròn trong mỗi tiêu đề và đặt overflow:hidden trên tiêu đề che giấu các phần của vòng kết nối bạn không muốn hiển thị.

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