Circular container div masking the nested div

Question

Circular container div masking the nested div

Is there a CSS solution for creating a circular container with a rectangular div inside it, positioned at the bottom and masked off so that anything outside of the container's border radius is hidden? I'm looking to achieve this effect but unsure of how to proceed. See the included screenshot for reference and review my code below:

<div id="coupon_container">
  <div id="meter_container">50c off</div>
</div>

#coupon_container {
    position: fixed; right:0; top:0; z-index: 100; color: #fff; width:170px; height: 120px; 
    #meter_container { 
        position: absolute; width: 110px; height:110px; .round; background: @greenDk; border:5px solid #fff; left: 60px; overflow: hidden; 
        .meter_level { width: 100%; height:30%; position: absolute; bottom:0; text-align: center; font-size: 1.6em; background: @limeLt; } 
    }
}

css html background mask masking

Answer 1

Answer №1

I was really impressed by the innovative gradient solution shared by bookcasey. However, considering compatibility issues with IE9 not supporting CSS gradients, I came up with an alternative approach:

Check out the demo here

The concept involves using a top padding of 70% instead of relying on absolute positioning.

Here's the HTML code:

<div id="coupon_container">
    <div id="meter_container">50c off</div>
</div>

And the corresponding CSS:

#coupon_container {
    overflow: hidden;
    width: 8em; height: 8em;
    border-radius: 50%;
    background: green;
}
#meter_container { 
    margin: 70% 0;
    height: 30%;
    text-align: center;
    background: lime;
}

Answer 2

I was really impressed by the innovative gradient solution shared by bookcasey. However, considering compatibility issues with IE9 not supporting CSS gradients, I came up with an alternative approach:

Check out the demo here

The concept involves using a top padding of 70% instead of relying on absolute positioning.

Here's the HTML code:

<div id="coupon_container">
    <div id="meter_container">50c off</div>
</div>

And the corresponding CSS:

#coupon_container {
    overflow: hidden;
    width: 8em; height: 8em;
    border-radius: 50%;
    background: green;
}
#meter_container { 
    margin: 70% 0;
    height: 30%;
    text-align: center;
    background: lime;
}

Answer 3

Answer №2

To achieve the desired effect, CSS3 gradients can be utilized:

#discount_box {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: -webkit-gradient(linear, 50% 0%, 50% 70, color-stop(100%, #fa8072), color-stop(100%, #ff0000));
  background: -webkit-linear-gradient(top, #fa8072 70px, #ff0000 70px);
  background: -moz-linear-gradient(top, #fa8072 70px, #ff0000 70px);
  background: -o-linear-gradient(top, #fa8072 70px, #ff0000 70px);
  background: linear-gradient(top, #fa8072 70px, #ff0000 70px);
  position: relative;
}

#level_indicator {
  width: 120px;
  text-align: center;
  position: absolute;
  bottom: 15px;
}

See a demo here

Answer 4

To achieve the desired effect, CSS3 gradients can be utilized:

#discount_box {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: -webkit-gradient(linear, 50% 0%, 50% 70, color-stop(100%, #fa8072), color-stop(100%, #ff0000));
  background: -webkit-linear-gradient(top, #fa8072 70px, #ff0000 70px);
  background: -moz-linear-gradient(top, #fa8072 70px, #ff0000 70px);
  background: -o-linear-gradient(top, #fa8072 70px, #ff0000 70px);
  background: linear-gradient(top, #fa8072 70px, #ff0000 70px);
  position: relative;
}

#level_indicator {
  width: 120px;
  text-align: center;
  position: absolute;
  bottom: 15px;
}

See a demo here

Answer 5

Answer №3

It's possible that I'm overlooking a key detail, but wouldn't it work if you simply included "overflow: hidden;" in the styling of the circular element, #coupon_container?

Answer 6

It's possible that I'm overlooking a key detail, but wouldn't it work if you simply included "overflow: hidden;" in the styling of the circular element, #coupon_container?

Circular container div masking the nested div

Answer №1

Check out the demo here

Answer №2

Answer №3

Similar questions

Incorporate a website link into an isotope filter

I am facing difficulty in implementing external CSS in my HTML document

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

Is it necessary to incorporate iOS default controls into my HTML code?

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

Arrange two internal divs on top of one another with the option to maintain the float

Acquiring Twitter updates for a dynamic Bootstrap carousel display

Utilize JQuery to transfer a cell that currently resides in one row to a new row

Switch Cursor on Movable Area in Electron

Displaying the Indian Rupee symbol in PHP

Exporting a web page as a Microsoft Word document is not working properly because

How can you save the output of console.log in JavaScript to a variable and then use that variable in HTML?

deleting multiple items with checkbox selection in Angular 2

React-select: issue with maintaining selected option on input

What is preventing me from assigning all padding values at once?

Choosing elements in jQuery

How to center a Bootstrap 4 navbar with brand and links in the middle

Execute a script upon page load

Troubleshooting Problem: Grid Layout Problem with Thumbnail Images in Responsive Image Gallery

Ways to restrict users from accessing a file stored on the server?