Courbe de Bézier en CSS?

Existe-t-il un moyen d'obtenir ce bezier effect en CSS? Comme vous pouvez le voir dans le violon que je utilise la toile pour ajouter une section inférieure curvey à la poignée de commande de la fenêtre avec ce code:Courbe de Bézier en CSS?

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();

Mais il ne semble pas très bon. C'est flou et ne s'aligne pas complètement. Si je pouvais utiliser CSS, il serait net.

Source

2014-07-25 adamk33n3r

chemins de Bézier en CSS .... Non ... ne peut pas dire que je l'ai jamais entendu parler de cela. CSS n'est pas vraiment conçu pour dessiner, plus de style. –

Peut-être aller oldschool avec une image de fond! –

Le plus proche, vous pouvez entrer juste CSS est quelque chose de hacky: http://jsfiddle.net/TylerH/DaKFb/1/ Basé sur le travail de quelqu'un que j'ai vu il y a longtemps et enregistré pour référence. Il est préférable d'utiliser Canvas, je pense, et juste jouer avec pour essayer de lisser les bords.

#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>

Visitez cette page pour savoir comment faire dans Canvas SVG: http://www.sitepoint.com/html5-svg-cubic-curves/

Source

2014-07-25 01:15:35 TylerH

Merci Tyler, cette réponse m'a aidé. Je pense que je peux travailler avec ce violon. Je peux aussi essayer le SVG – adamk33n3r

Donc voici ce que j'ai fait avec SVG. Je pense que cela semble assez bon! :) http://jsfiddle.net/adamk33n3r/6Mw6N/3 – adamk33n3r

@ adamk33n3r Ça a l'air génial! Une bien meilleure approche que le CSS pur. – TylerH

Courbe de Bézier en CSS?

Répondre

Questions connexes