Question

有没有办法在CSS中获取此bezier effect？正如你在小提琴中看到的那样，我使用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/

CSS中的Bezier曲线？

1 个答案: