Question

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

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

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

这段代码给了我非常大而窄的花括号，但我希望有一个非常薄的括号，只有“手臂”变长。

有人知道如何实现这个目标吗？

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

<span id="cont"><span>}</span><span>}</span><span>}</span></span>

<强> 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;
}

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

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

3 个答案: