CSS中的贝塞尔曲线？

Question

有没有办法在CSS中获得这种bezier效果 ？ 正如您在小提琴中看到的那样，我正在使用画布通过以下代码向窗口控件句柄添加弯曲的底部：

ctx.beginPath();
ctx.moveTo(20,0);
ctx.bezierCurveTo(25,15,0,10,-1,35);
ctx.strokeStyle="#000"
ctx.lineWidth=4;
ctx.stroke();
ctx.lineTo(-1,0);
ctx.lineTo(300,0);
ctx.fillStyle="#222"
ctx.fill();
ctx.closePath();

但这看起来不是很好。 模糊，无法完全对齐。 如果我可以使用CSS，那么它看起来会很清晰。

Answer 1

您可以在CSS中找到的最接近的东西是个骇人听闻的东西： http : //jsfiddle.net/TylerH/DaKFb/1/基于很久以前我见过的某人的工作，保存下来以供参考。 我认为最好使用Canvas，并尝试弄乱边缘的平滑度。

 #curves div { width: 100px; height: 100px; border: 1px solid black; } #curves.width div { border-color: transparent transparent transparent black; } #curve5 { border-radius: 60px 0 0 0; } 

 <div id="curves" class="width"> <div id="curve5"></div> </div> 

访问此页面以了解如何在Canvas SVG中执行此操作： http : //www.sitepoint.com/html5-svg-cubic-curves/