html - css - div 顶部的 svg 圆角曲线形状

Question

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

我的第一个想法是创建一个相应的超大尺寸div和位置border-radius: 100%，但它变得太荒谬而无法获得准确的曲线。heightwidthdiv

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

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

标签： htmlcsssvg

Answer 1

这是可以帮助您入门的内容（改编自我给出的另一个答案https://stackoverflow.com/a/59856544/9792594）：

（使用svg作为形状并在内部（带）和外部插入普通html<foreignobject/>。注意：动画的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>