带有 CSS 或 jQuery 的非常宽的细花括号

Question

有没有办法用 CSS/jQuery获得非常宽但很细的花括号？

简单地缩放div也会缩放线宽，所以大括号变得太大时会变得丑陋。

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

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

这段代码给了我很大很窄的花括号，但我想要非常细的花括号，只有“手臂”变长了。

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

Answer 1

我不擅长 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;
}

<div class="brace brace_part1"></div>
<div class="brace brace_part2"></div>
<div class="brace brace_part3"></div>
<div class="brace brace_part4"></div>

Answer 2

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