两段之间的曲线弧

编程问答 2022-05-14

问题描述

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

enter image description here

解决方法

多个背景和剪辑路径

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

css-shapessvgsvgsvg