CODEWITHSUNDEEP
javascriptjquerycss
user2685771
user2685771

Reputation: 41

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

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: http://i44.tinypic.com/2yulimp.jpg

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

Upvotes: 2

Views: 1250

Answers (2)

Pavlo
Pavlo

Reputation: 44889

Radial gradient to the rescue (demo):

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

Upvotes: 2

Anobik
Anobik

Reputation: 4899

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 :)

Upvotes: 1

Related Questions