Question

我正试图从他的父母那里移除一个半圈div，这是为了揭示底层背景，有人知道我怎么能处理它吗？

我已经找过画布或jquery相关的解决方案，但我找不到任何东西

我希望达到如下目的：

这是我到目前为止所拥有的

<!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/

提前致谢

Answer 1

救援的径向梯度（demo）：

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

Answer 2

这是你想要的

<!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>

继续复制粘贴这个并运行你将得到你的弧。在你的应用程序中实现相同的。身体有红色背景。 :)请在放弃之前进行研究：）

如何从父div中剪切半圆div，以显示背景

2 个答案: