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

lf3rwulv 于 2022-12-12 发布在 jQuery

关注(0)|答案(2)|浏览(107)

我正在尝试从他的父代中删除一个半圆形div，这是为了显示页脚的底层背景，有人知道我如何处理吗？
我已经在寻找与canvas或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/
先谢了

jquery

来源：https://stackoverflow.com/questions/18716596/how-can-i-cut-a-half-circle-div-from-parent-div-to-reveal-background

2条答案

按热度按时间

u4dcyp6a1#

救援径向梯度（demo）：

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

赞(0）回复(0）举报 2022-12-12

koaltpgm2#

这是你想要的

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

继续复制粘贴这个和运行你会得到你的弧。在你的应用程序实现相同。身体有一个红色的背景。：）请研究之前，你给予：）

赞(0）回复(0）举报 2022-12-12

我来回答

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

2条答案

相关问题

热门标签

最新问答