css - div顶部的svg圆角曲线形状[关闭]

Question

我正在尝试创建一个横跨整个屏幕宽度的形状，如下图所示。

我的第一个想法是用border-radius: 100% 创建一个超大的div 并相应地定位，但是div 的height 和width 变得太荒谬了，无法准确地得到曲线。

我的第二个想法是创建一个简单的 SVG 形状来生成曲线，并在下方放置一个 div 以用相同的颜色“填充”剩余的视口。

由于我不熟悉 SVG，我的新方法可以实现吗？

Answer 1

这里有一些东西可以帮助你入门（改编自我给 https://stackoverflow.com/a/59856544/9792594 的另一个答案）：

（将svg 用于形状并在内部（使用<foreignobject/>）和外部插入普通html。注意：smil 和javascript 用于动画 - 可选）

在此处（及下方）演示https://codepen.io/Alexander9111/pen/JjdbMqM

您可以设置贝塞尔曲线的“控制点”以创建不同的曲率等。-https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Bezier_Curves)

const target = document.querySelector("#target");
const animate_el = document.querySelector("#target > animate");
const from = animate_el.getAttribute("from");
const to = animate_el.getAttribute("to");
var d;

function forwards(){
  d = target.getAttribute("d");
  animate_el.setAttribute("from", d);
  animate_el.setAttribute("to", to);
  animate_el.beginElement();
}

function backwards(){
  d = target.getAttribute("d");
  animate_el.setAttribute("from", d);
  animate_el.setAttribute("to", from);
  animate_el.beginElement();
}

document.querySelector("#input_div > input").addEventListener('focus', forwards);
document.querySelector("#input_div > input").addEventListener('blur', backwards);

div.container {
  float: left;
  clear: left;
  box-sizing: border-box;
  padding-left: 0;
  padding-right:0;
  padding-top:0;
  padding-bottom: 100px;
  border: 1px solid black;
  background: linear-gradient(to bottom, #e0e0e0 20%, #fcba03 20%);
}

button, svg {
  float: left;
  margin: 5px;
}

svg {
  clear: left;
  margin: 0;
}

#input_row {
  float: left;
  clear: left;
  width: 390px;  
}

#input_div {
  padding-left: 20%;
}
  
input {
  width: 100%;
  text-align: center;
  clear: left;
}

<div class="container">
<svg height="400" width="400">
  <path id="target" d="M-5 200 H410 V80 Q 250 40 -5 20 Z" fill="#fcba03" stroke="#ffffff" stroke-width="7">
        <animate
       attributeName="d" from="M-5 200 H410 V80 Q 250 40 -5 20 Z" to="M-5 200 H410 V20 Q 150 20 -5 20 Z"
       dur="0.5s" repeatCount="1" begin="indefinite" fill="freeze" />  
  </path>
  <rect id="target2" x="-5" y="195" width="410" height="10" fill="#fcba03"> 
  </rect>
<foreignobject class="node" x="0" y="250" width="100%" height="100">
<div id="input_row">
  <div id="input_div">
    <label>Enter here: </label>
    <input placeholder="type something here" vlaue =""/>
    <small>Animation takes place on focus and returns again on blur</small>
  </div>
</div>
</foreignobject>
</svg>
</div>

更新 - 使用css

更轻松的解决方案

看看这个：

最重要的线是两个渐变的组合（并且使用 rgba 将 alpha 设置为零作为线性渐变，因此不覆盖径向渐变）：

background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0% 40%, #fcba03 40% 100%),
    radial-gradient(farthest-corner at -900px 250px, #fcba03 80%, #ffffff 80% 81%, #e0e0e0 81%);

div.container2 {
  float: left;
  clear: left;
  box-sizing: border-box;
  padding-left: 0;
  padding-right:0;
  padding-top:0;
  padding-bottom: 100px;
  border: 1px solid black;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0% 40%, #fcba03 40% 100%), radial-gradient(farthest-corner at -900px 250px, #fcba03 80%, #ffffff 80% 81%, #e0e0e0 81%);
}

<div class="container2" style="margin-top: 20px; margin-bottom: 20px;">
  <div style="height: 400px; width:400px;">
  </div>
</div>