How can I cut a half circle div from parent div, to reveal background

Question

I'm trying to remove a half circle div from his parent which is to footer to reveal the underlaying background, does anyone know how I could handle that?

I've already looked for canvas or jquery related solutions but I could find anything

I want achieve something like this:

This is what I have so far

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
    <link rel="stylesheet" href="css/sticky.css"/>
    <script>
    </script>
  </head>
  <body>
      <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">

        </div>
      </div>
    </div>  
    <div class="container">
      <div class="content">
        <div class="wrapper">
          </div>
          <div class="push"></div>
        </div>
        <div class="footer-wrapper">
          <footer>
            <center><div class="halfCircleBottom"></div></center>
          </footer>
        </div>
  </body>
</html>

http://jsfiddle.net/bjuyn/

Thanks in advance

Unlike Photoshop, stanadard CSS does not have a cut-out or punch property to create graphical effects like you are requesting. You will need to use an image or SVG if you want to spend a lot more time on it. You are asking, naively, for something that cannot be done. Of course, I someone proves me wrong, I will be delighted to upvote the solution. — Marc Audet, Sep 10 '13 at 10:47
@MarcAudet it's actually pretty easy with canvas and clipping, but why would anyone want do go this way? — Prinzhorn, Sep 10 '13 at 10:54
@Prinzhorn Using canvas is great with modern browsers that support it. I agree, a simple PNG would do the trick. This is a minor design detail in the layout, this is not worth more than 20 minutes of development time. (I have not yet tried out canvas, on my list...) — Marc Audet, Sep 10 '13 at 10:56
You could probably force this behavior by creating the footer out of two divs, both 50% in width and botching an inverted rounded corner, although I have no idea what the result would look like! There's some examples of trying to do this behavior here http://stackoverflow.com/questions/2936262/css3-inverted-rounded-corner, Regardless, this would take a fair while to implement, and would probably look less than professional. I'd also just suggest trying to convince them to use a PNG — SubjectCurio, Sep 10 '13 at 11:03

Pavlo · Answer 1 · 2022-12-05T14:44:44.177

2

Radial gradient to the rescue (demo):

.circle {
  background-image: radial-gradient(circle 50px at 50% 0, transparent 50px, green 50px);
}

edited Dec 05 '22 at 14:44

answered Sep 10 '13 at 11:29

Pavlo

43,301
14
77
113

Nice one. Add some anti-aliasing (like 1px gradient) and it's perfect. – Prinzhorn Sep 10 '13 at 12:56

score 1 · Answer 2 · answered Sep 10 '13 at 11:10

Here is what you want

<!DOCTYPE html>
<html>
<head>
    <style>
#dvRadiusTest{
min-height: 100px;
min-width: 100px;
max-height: 100px;
max-width: 100px;
background-color:red;
border-radius: -20px;
}
    </style>
    <script type="text/javascript">
    function clip(){
    var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');



// Now draw the window over our cirlce
ctx.beginPath();
ctx.fillStyle = 'lightblue';
// First we draw a path counter-clockwise
ctx.moveTo(0,0);
ctx.lineTo(0,840);
ctx.lineTo(840,840);
ctx.lineTo(840,0);

// Then we call rect four times, which adds a rect to our path going clockwise
ctx.arc(288, 0, 70, 0, Math.PI, false);

// Notice that this entire time we are making the window we never make a new path (just at the start),
// all of our commands have only added to the current path.
// This will mean that the 4 clockwise rects will be "cut out" of the counter-clockwise path.
// Making a window

ctx.fill();
    }
    </script>
<head>
<body onload="clip()" style="background-color:red">
      <canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>

Go ahead copy paste this and run you will get your arc . implement the same in you app. Body has a red background. :) Please research before you give up :)

How can I cut a half circle div from parent div, to reveal background

2 Answers2