css - CSS 中的贝塞尔曲线？

Question

有没有办法得到这个 bezier effect在 CSS 中？正如您在 fiddle 中看到的那样，我使用 Canvas 通过以下代码将曲线底部添加到窗口控制 handle :

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/