Html 用CSS括线

是否可以使用CSS或其他技术创建水平花括号？我事先不知道花括号的宽度，我可以在同一页上有多个不同宽度（但高度相同）的花括号。我的第一个想法是使用我拉伸的图像来获得正确的宽度，但我不希望图像被扭曲。所以我在寻找另一个解决方案

括号将用于在复杂表格下添加说明。请参见下面的简单示例

---

类似这样的东西可以满足您的需要-您可以根据自己的需求调整CSS样式

HTML

 <span>}</span>
 <p>
    Neque porro quisquam est qui dolorem ipsum, 
    Neque porro quisquam est qui dolorem ipsum 
 </p>

---

此处链接到JSFiddle:

您可以为每侧和每侧上使用两个元素：

：before

和

：after

伪元素。然后可以使用“边界半径”创建半圆并旋转它们

.parent{
填充：50px；
显示：内联块；
文本对齐：居中；
}
p{
最大宽度：300px；
}
艾尔先生{
显示：内联flex；
}
.el>div{
宽度：50px；
高度：1px；
背景：黑色；
利润率：20px 30px；
位置：相对位置；
}
.el>div:之前，
.el>div:之后{
内容：''；
位置：绝对位置；
宽度：30px；
高度：30px；
边框左上半径：200px；
边框：1px纯黑；
边界权：无；
边框底部：无；
}
.el>div:之后{
右：-30px；
}
.右：之后{
变换：旋转（-180度）；
顶部：-30px；
}
.左：以前{
变换：旋转（-90度）；
顶部：-30px；
左：-30px；
}
.左：之后{
变换：旋转（90度）；
}
.对：以前{
左：-30px；
}

Lorem ipsum dolor sit amet，奉献精英。不，sequi

它被称为a（谷歌上的第一个结果）好吧，你可以使用}字符，只需将字体大小设置得足够高，然后

transform:rotate（90deg）

将其侧向旋转。人们需要了解CSS不是一个图形绘图程序。对我们来说，大括号字符很聪明。但是，有可能在同一页上有多个大括号，宽度不同但高度相同吗？@Rob我同意你的观点，你不应该在图形元素中过度使用CSS。我愿意接受一个建议，如何在没有CSS的情况下做到这一点。很好的解决方案。但是可以控制花括号的宽度吗？您可以更新变换属性以获得比例-请参阅更新的答案。谢谢。但是，如果我希望括号的宽度与表格单元格的宽度一样，该怎么办？看见

span {
  display: block;
  font-weight: 200;
  font-size: 96px;
  text-align: center;
  -webkit-transform: rotate(90deg) scale(0.75);
  -moz-transform: rotate(90deg) scale(0.75);
  -o-transform: rotate(90deg) scale(0.75);
  -ms-transform: rotate(90deg) scale(0.75);
  transform: rotate(90deg) scale(0.75);
}

p {
  text-align: center;
  padding: 0 50px;
}