两个部分之间的曲线弧[关闭]

Posted 2023-03-06

【中文标题】两个部分之间的曲线弧[关闭]

【英文标题】：Curve arc between two sections [closed]

【发布时间】：2021-07-05 06:44:29

【问题描述】：

如何使用 CSS 或 SVG 在两个部分之间制作弯曲的弧线，如下所示： （灰色部分和蓝色页脚之间的橙色弧线）

【问题讨论】：

您可以通过多种方式进行操作。你是如何处理这个问题的？你能包括一些代码吗？我会使用带有绝对位置和伪元素的额外 div 元素，但这只是我。

@DebsmitaPaul 谢谢你，我试过了，但我不能完全按照例子来做

【参考方案1】：

多重背景和剪辑路径

.box 
  height:300px;
  background:
    radial-gradient(75%  95% at 56% 100%,blue 99%,transparent)
    orange;
  clip-path:ellipse(80% 100% at 50% 100%)

<div class="box"></div>