1

我正在尝试从他的父母那里删除一个半圆形的 div 以显示底层背景，有人知道我该如何处理吗？

我已经在寻找与 canvas 或 jquery 相关的解决方案，但我可以找到任何东西

我想实现这样的目标：http://i44.tinypic.com/2yulimp.jpg

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

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

提前致谢

4

2 回答 2

1

径向梯度救援（演示）：

.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);
}
于 2013-09-10T11:29:02.820 回答
0

这就是你想要的

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

继续复制粘贴并运行，您将获得 arc 。在您的应用程序中实现相同的功能。身体有一个红色背景。:) 放弃前请先研究一下 :)

于 2013-09-10T11:10:09.087 回答