jquery - 带有 CSS 或 jQuery 的非常宽的薄花括号

Question

有没有一种方法可以使用 CSS/jQuery 获得非常宽但又细的花括号？

简单地缩放 div 也会缩放线宽，因此当变得太大时大括号会变得难看。

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

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

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

有人知道如何实现吗？

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>