非常宽的薄花括号与css或jquery

有没有办法用css / jquery获得非常宽但细的花括号？ 简单地缩放div也会缩放线宽，因此当太大时，牙套会变得难看。

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

这段代码给了我非常大而窄的花括号，但是我想要非常薄的括号，只有“arm”变得更长。

有谁知道如何实现这一目标？

Answer 1

我最后使用的解决方案是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(); 

Answer 2

它非常非正统且非常丑陋，但你可以重复大括号并每次向左偏移一个像素：

HTML

 }}} 

CSS

 #cont{position:relative; font-size:32px;} #cont span{position:absolute;top:0; left:0;} #cont span:nth-child(2){left:1px} #cont span:nth-child(3){left:2px} 

就像我说的那样，非常丑陋且非常狡猾。 但我不认为有一种方法可以增加“厚度” – 除了大胆的限制。

的jsfiddle

或者使用jQuery为您完成：

 $orig = $('#orig'); for(i=0;i<5;i++){ $orig.clone().css({left:i+1}).appendTo($('#cont')); } 

for()限制是复制大括号的次数。

的jsfiddle

Answer 3

我不擅长html / css，但我尽我所能……

 #brace { width: 2em; height: 3em; } .brace_part1 { border-left: 2px solid black; border-top-left-radius: 12px; margin-left: 2em; } .brace_part2 { border-right: 2px solid black; border-bottom-right-radius: 12px; } .brace_part3 { border-right: 2px solid black; border-top-right-radius: 12px; } .brace_part4 { border-left: 2px solid black; border-bottom-left-radius: 12px; margin-left: 2em; }