Completely overlay a div with another div that is the exact same size

Issue:

I am experiencing visibility of the underlying divs, even though they are supposed to be covered by another div of the same size.

.gauge-wrapper {
    position:relative;
    margin:20px;
    background-color: black;
}
.gauge-arc {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    border-radius:100%;
    border:7px solid;
}
.gauge-arc1 {
    border-color:red transparent transparent transparent;
    transform: rotate(200deg);
}
.gauge-arc2 {
  border-color:red transparent transparent transparent;
  transform: rotate(180deg);
}
.gauge-arc3 {
    border-color:red transparent transparent transparent;
    transform: rotate(180deg);
}
.gauge-mask {
    border-color: transparent transparent white transparent;
    z-index:9999
}
.gauge-background {
  border-color: #c3bdbd;
  z-index: -1;
}
<div class="gauge-wrapper">
    <div class="gauge-arc gauge-arc1"></div>
    <div class="gauge-arc gauge-arc2"></div>
    <div class="gauge-arc gauge-arc3"></div>
    <div class="gauge-arc gauge-mask"></div>
    <div class="gauge-arc gauge-background"></div>
</div>

Attempted Solutions:

  • Increased border width on top div
  • Modified border color
  • Adjusted bottom border width only

Desired Outcome:

The top div should not have any visible outline. I am open to unconventional fixes for this issue. If there is a simpler way to achieve my goal, I welcome that as well but still seek resolution using HTML/CSS specifically.

htmlcssborderz-index

Answer №1

To adjust the size of the mask and create a thicker border, you can utilize box sizing. By increasing the mask by 2px, you will automatically give it a border that is 2px thicker, effectively covering the arcs below:

* {
  box-sizing: border-box;  /* maintains consistent size for squares despite padding and border */
}

.gauge-wrapper {
  width: 102px;      /* defining width and height (optional) to ensure it occupies space when positioned absolutely */
  height: 102px;
  position: relative;
  margin: 20px;
}

.gauge-arc {
  position: absolute;   
  top: 1px;           /* starting 1px inside to make outer circle appear larger and cover properly */
  left: 1px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 7px solid;
}

.gauge-arc1 {
  border-color: red transparent transparent transparent;
  transform: rotate(200deg);
}

.gauge-arc2 {
  border-color: red transparent transparent transparent;
  transform: rotate(180deg);
}

.gauge-arc3 {
  border-color: red transparent transparent transparent;
  transform: rotate(180deg);
}

.gauge-mask {
  top: 0;
  left: 0;
  width: 102px;
  height: 102px;
  border: 9px solid;
  border-color: transparent transparent white transparent;
  z-index: 9999
}

.gauge-background {
  border-color: #c3bdbd;
  z-index: -1;
}
<div class="gauge-wrapper">
  <div class="gauge-arc gauge-arc1"></div>
  <div class="gauge-arc gauge-arc2"></div>
  <div class="gauge-arc gauge-arc3"></div>
  <div class="gauge-arc gauge-mask"></div>
  <div class="gauge-arc gauge-background"></div>
</div>

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

Unlocking the Power of ASP.NET C# for Adding HTML in Code Behind

How do I input HTML in the code behind? This is the HTML code I have: <table style="width:100%"> <tr> <th>Product</th> <th>Price</th> <th>Edit</th> </tr> <!-- I need to insert ...

c#htmlasp.net

Mismatched heights of grid elements

Currently, I am utilizing Tailwind CSS V3 and struggling to set the consistent height of grid items. The only way I can achieve uniform height is by assigning them a height of h-96. However, when I attempt to use breakpoints such as lg:h-80 and md:h-96, th ...

htmlcsstailwind-css

How can I eliminate unnecessary gaps in a CSS slider design?

Currently, I am in the process of learning CSS3 and attempting to create a purely CSS slider. Everything has been going smoothly until I encountered an unexpected padding or margin within my slider. After making some adjustments to the margins, the issue ...

htmlcssslider

Save an automatically generated number into a variable and use it to reference an image file for display. This process can be accomplished using JavaScript

I'm having trouble getting my images to display randomly on a page. The images are named 0 - 9.png and I am using a pre-made function for random number generation. However, when I try to call on this function later down the page, nothing appears. It ...

javascripthtmlfunctionrandom

Rebel Spirit on a Wordpress Platform

I've encountered a strange issue on my Wordpress blog. For some reason, the code "&nbsp" is being inserted right after the opening <body> tag. I have checked the header.php file and there is no instance of this code present there. It's ...

phphtmlcsswordpresswordpress-theming

Methods for adjusting columns and rows in HTML5 tables

As I was preparing to create a compatibility guide, I noticed that the HTML code consisted of a table. While tables are effective for displaying data, they can be cumbersome to edit frequently. What tools are available to quickly and cleanly edit an exist ...

htmlhtml-table

Stop tooltips from appearing on hyperlinks in Internet Explorer

Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...

htmlinternet-explorertooltip

The Bootstrap navbar appears to extend beyond the content on the page

I am new to using Bootstrap. I have encountered an issue with the navbar on my website. The navbar appears to be longer than the screen size and the right button is being overlapped by the right side of the window. Unfortunately, I am unable to scroll the ...

jqueryhtmlcsstwitter-bootstrap-3navbar

What is the best way to position my two icons next to each other in the footer of my React application?

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much ...

cssreactjssingle-page-applicationreact-bootstrapfooter

Using PHPs nth-child in media queries

There are multiple images on MyPage, typically displayed in rows of 6. However, the number of images per row adjusts based on browser size using media queries. The issue arises with the margin set for the last image in each row, as the nth-child property r ...

phphtmlcss

Managing varied PHP submissions using a single 'isset' declaration

I'm working on loading data from a MySQL database with PHP and displaying images in HTML. When a specific image is clicked, I want to show text associated with that image using MySQL/PHP. I'm looking for a way to achieve this without having multi ...

phphtmlmysqlisset

Explaining the precise measurements of font size in CSS

I recently started diving into the world of CSS and picked up a copy of Eric Meyer's 3rd edition of CSS: The Definitive Guide. While reading through his section on font sizes (page 107), I came across an interesting concept - that the font size deter ...

cssfonts

Silver button seems blue on iPhone

After creating this html code for a blue login button: <div class="p12"> <input type="submit" value="Log In" class="button loginButton"> </div> I added the following CSS style to it: .loginButton { background-color:#627aad; border:1px ...

htmlcssiphone

What is the best way to eliminate the gap between header, content, and footer sections when in mobile view?

This issue seems to only occur in mobile mode, where the blueviolet line is coming from the background color. https://i.stack.imgur.com/VBhIp.png link to the image body { background-color: blueviolet; } header, main, footer { background-color: #ff ...

htmlcss

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

javascripthtmlforms

What are the HTML5 elements that include the "load event" within their onload attribute?

Mozilla's MDN provides information regarding the load Event with this brief explanation: The load event is triggered when a resource and its dependent resources have completed loading. and references standard 1, which states Trusted Targets: ...

javascripthtmldom-eventsstandards

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

Angular - ngbDropdownMenu items are hidden from view, but their presence is still detectable

Hey there! I'm currently working on a school project and I'm aiming to implement a drop-down menu. Surprisingly, it's proving to be more challenging than expected. <div class="parrent"> <div class="row"> ...

htmlcssangularstylesdropdown

Show a visual content in Grails Server Pages created through a specific class

In my class file, I have the image path displayed as shown below: String val; val+= "<img src=/"PATH_TO_FILE/" alt=/"sometext/">" Now, I am attempting to load the image in a gsp view within a div using jQuery from the val variable. The image is be ...

javascriptjqueryhtmlimagegrails

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?

I am experiencing difficulty implementing a styling feature using the ternary operator within an element's className. My goal is to have three buttons that render a specific component when clicked. Additionally, I want to change the background color ...

cssreactjsconditional-operatorconditional-renderingreact-css-modules