非常宽的大括号用css或jquery [英] Very wide thin curly braces with css or jquery

问题描述

有一种方法可以得到非常宽，但薄的花括号与css / jquery？


< div id = bracesstyle =font-size：20px;> {< / div>



$（＃braces）。css（{
transform：scale（4,25）
}）;


这段代码给了我非常非常大和狭窄的大括号，但我想有非常细的大括号，

解决方案

$ arm
$ b

我使用的解决方案最终是 http://jsfiddle.net/q9Bcb/69/

  var height = canvas.height; 
 var space = 5; 
 var radius = 7; 
 
 var linelength = height / 2; 
 
 context.lineWidth = 4; 
 context.beginPath（）; 
 context.moveTo（20 + radius，space）; 
 context.arcTo（20，space，20，space + radius，radius）; 
 
 context.lineTo（20，linelength  -  radius）; 
 context.arcTo（20，linelength，20  -  radius，linelength，radius）; 
 context.arcTo（20，linelength，20，linelength + radius，radius）; 
 context.lineTo（20，height  -  space  -  radius）; 
 context.arcTo（20，height  -  space，20 + radius，height  -  space，radius）; 
 
 context.stroke（）; 
  

Is there a way to get very wide but thin curly braces with css/jquery ? Simply scaling the div also scales the line width, so the braces become ugly when getting too big.

<div id="braces" style="font-size:20px;">{</div>

$("#braces").css({ "transform" : "scale(4,25)" });

This code gives me very very large and narrow curly braces, but I would like to have very thin braces where only the "arms" became longer.

Has anyone an idea of how to achieve that?

解决方案

The solution I used in the end is http://jsfiddle.net/q9Bcb/69/

    var height = canvas.height;
    var space  = 5;
    var radius = 7;

    var linelength = height / 2;

    context.lineWidth = 4;
    context.beginPath();
    context.moveTo(20+radius, space);
    context.arcTo(20, space, 20, space+radius, radius);

    context.lineTo(20, linelength - radius);
    context.arcTo(20, linelength, 20 - radius, linelength, radius);
    context.arcTo(20, linelength, 20, linelength + radius, radius);
    context.lineTo(20, height - space - radius);
    context.arcTo(20, height - space, 20 + radius, height - space, radius);

    context.stroke();

这篇关于非常宽的大括号用css或jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！