CSS中的Bezier曲线？

Question

有没有办法在CSS中获得这种更好的效果？正如你在小提琴中看到的那样,我使用canvas将这个代码添加到窗口控件句柄的curvey底部:

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的是hacky: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/