How to make a circle only in certain divs with different colors?

Question

Basically I will try to make it simple.

I am trying to do something like this (ignore any design aspects except what I state):

I started this on 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> 

The main problem is that I can’t make myself seem that the circle connects through two rectangles and has two different colors, for example, in the image. It still cuts out the rest of the circle that flows from the rectangle.

Hope this makes sense.

Thanks in advance.

Answer 1

I should have changed your mark. For the old brand to work, it would be too negligent. Basically, I assigned a circle to each title, and I set the overflow to hidden in the title. Then I play with the top property to decide which part of the circle I want to display. There is a small blue bar on the border on the left, but I’m sure not to drag out to understand why.

 .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

In fact, you can do this with even less HTML tags and use the ::before or ::after psuedo element to create a circle: https://developer.mozilla.org/en-US/docs/Web/CSS/ :: after

This creates a child for the circle in each title, and setting overflow:hidden in the title hides the parts of the circle that you don't want to see.

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