Managing the intersection of div elements

Can someone help me make the inner part of the red circle white, overlapping with the blue circle and transparent for the rest to reveal the green color underneath?

If anyone has a solution, I would greatly appreciate it.

#bigCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(0,0,250,0.5);
}

.smallCircle {
    margin-top: -244px;
    margin-left: 1px;
    border: solid rgb(226, 85, 20);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color:rgba(255,255,255,0);
}
<div id="bigCircle">
        <div id="middleCircle">
            <div class="smallCircle" />
        </div>
</div >
cssoverlap

Answer №1

#bigCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -242px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  position: relative;
}

.smallCircle:after {
  display: block;
  content: '';
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  clip-path: circle(120px at 50% 130px);
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: -3px;
  left: -3px;
}
<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle">
    </div>
  </div>
</div>

Answer №2

Imagine using a radial-gradient for the background color, fixed in place to match the blue circle:

#bigCircle,
#middleCircle{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  width: 240px;
  height: 240px;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -244px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition:1s all;
  background:radial-gradient(circle 120px at 190px 190px,#fff 99%,transparent 100%) fixed;
}
#middleCircle:hover .smallCircle {
  margin-top: -100px;
}
body {
  margin:0;
}
<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle" ></div>
  </div>
</div>

Answer №3

If I understood correctly, this solution may be helpful.

Styling with CSS

#hugeCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: rgba(33, 180, 45, 0.9);
}

#mediumCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background-color: rgba(90, 90, 200, 0.7);
}

.tinyDot {
    margin-top: -264px;
    margin-left: 3px;
    border: solid rgb(216, 92, 25);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing different elements using identical classes in JQuery

Struggling with a coding problem that seems like it should be an easy fix, but can't quite figure it out. The HTML code I have is as follows: <section class="actualite"> <div class="actualite-text"> <h3 class="title"&g ...

javascriptjqueryhtmlcss

Struggling to position a div below another div within a flex box layout

When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continued to align to the left of the oth ...

htmlcssangularflexbox

Ways to ensure that two divs have equal heights based on whichever one has the greater height using CSS

I need help with adjusting the heights of two divs inside a container div using CSS. Specifically, I want the height of the img_box div to match the height of the content_con div based on their actual content. For example, if the content_con div contains t ...

csshtml

Is it possible to apply the same styling to multiple elements simultaneously in jQuery by grouping them as in CSS?

Keeping code neat is essential. In CSS, elements can be grouped like this: .element1, .element2, .element3, .element4, .element5, .element6 { font-weight:bold; } I am curious if there is a similar method in jQuery or if each element needs to be set indi ...

jquerycssreadability

Ensure that bulleted lists and numbered lists are aligned to the left side

Check out this website where the ordered and unordered lists are not aligned correctly. The ideal alignment would have the bullets (or numbers) left aligned. For instance, the number "1." should be aligned to the left on the same line as the heading "Per ...

css

Ways to automatically divide lists into various div elements

Hey there! I currently have a list of categories on my page that is subject to change. I'm looking for assistance in creating a loop that will divide my lists into groups of 5 items per div. For example: foreach($categories as $cat) <label> ...

phphtmlcsslaravel-blade

The naming convention for CSS classes could be defined as follows: .sa-list li a > div{

As I dive into a CSS example, one particular section of code catches my eye: .sa-list li label > span, .sa-list li h3 > span, .sa-list li h4 > span, .sa-list li a > div{ position:relative; display:table-cell; vertical-align:middle; ...

css

Creating a sliding bottom border effect with CSS when clicked

Is there a way to animate the sliding of the bottom border of a menu item when clicked on? Check out the code below: HTML - <div class="menu"> <div class="menu-item active">menu 1</div> <div class="menu-item">menu 2</ ...

javascriptjqueryhtmlcss

Can file input buttons be custom styled?

Since I am using Material-UI, the traditional methods are not working for me. I have a form with two buttons positioned next to each other. One button is an "Upload File" input for users to upload a file, and the other is a submit button. I want both butto ...

javascriptcssuser-interfacematerial-ui

Best practices for organizing fonts in SCSS 7-1 architecture?

My current project restructuring involves implementing the 7-1 architecture recommended by . As part of this process, I am incorporating flaticons into my project. I'm unsure of where to place the folder and scss file provided by flaticon within the ...

cssarchitecturesassdirectory-structureproject-organization

Title with lower border shorter than width

Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question: ...

htmlcsscss-shapes

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

I have been attempting to solve the issue at hand without much success. As a newcomer to web development, I have been working on creating a basic app using angularjs and bootstrap. My pages are fairly sparse, consisting only of a few inputs and buttons t ...

javascripthtmlcssangularjstwitter-bootstrap

struggling to adjust image dimensions using bootstrap styling

Currently, I am in the process of creating a Carousel image slider using bootstrap. However, I am facing an issue with changing the height of the images within the carousel. Whenever I try to adjust the height, it ends up affecting both the width and heigh ...

htmlcssbootstrap-4

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

javascripthtmlcss

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...

htmlcssmarginpadding

Internal VS External Stylesheets: What you need to know

I'm currently in the process of developing a website and I have started utilizing the style tag at the beginning: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

htmlcssstyles

Place the bottom element of the top parent element in position

Creating a simple tooltip with bottom positioning at the top of the parent element involves setting a negative height for the tooltip element. However, when checking the height of the tooltip element upon hovering, it returns 0 according to console.log(). ...

javascriptjquerycsstooltip

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss

Is verifying email and password with jquery possible?

I am currently working on a jQuery form validation project: While the password and username validation are working fine, I am facing issues with email and password confirmation validations. Surprisingly, I have used the same technique for both. If you wa ...

javascriptjqueryhtmlcssvalidation