CSS如何在Div或Canvas上生成此Shape

Question

我已经尝试了3个小时来制作这个形状

在使用CSS的div上

画布绘图被接受，但Css是首选

谢谢你们：D

---

另一种方案

如果有人正在寻找Canvas解决方案或非固体背景， 请访问https://jsfiddle.net/roonie007/hemjfonx/1/

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var curveStrength = 50 ;


context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(canvas.width/2, curveStrength, canvas.width, 0);
context.lineTo(canvas.width,canvas.height);
context.lineTo(0,canvas.height);
context.lineTo(0,0);

context.fillStyle = "black";
context.fill();

Answer 1

知道什么样的形状是有用的。 为了解决问题，我正在将椭圆切成两半。

这很有趣。

编辑：改变我的代码一点看起来更清脆。

 #box { width:300px; height:50px; background:black; overflow:hidden; } #box::before{ content:''; display:block; width:300px; height:30px; background:white; border-radius:0 0 50% 50%; position:relative; top:-15px; } 

 <div id="box"> </div>