带CSS的支架线

Question

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

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

Answer 1

您可以为每一侧以及每个:before和:after伪元素使用两个元素。然后，您可以使用border-radius创建半圆并旋转它们。

.parent {
  padding: 50px;
  display: inline-block;
  text-align: center;
}
p {
  max-width: 300px;
}
.el {
  display: inline-flex;
}
.el>div {
  width: 50px;
  height: 1px;
  background: black;
  margin: 20px 30px;
  position: relative;
}
.el>div:before,
.el>div:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-top-left-radius: 200px;
  border: 1px solid black;
  border-right: none;
  border-bottom: none;
}
.el>div:after {
  right: -30px;
}
.right:after {
  transform: rotate(-180deg);
  top: -30px;
}
.left:before {
  transform: rotate(-90deg);
  top: -30px;
  left: -30px;
}
.left:after {
  transform: rotate(90deg);
}
.right:before {
  left: -30px;
}

<div class="parent">
  <div class="el">
    <div class="left"></div>
    <div class="right"></div>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, sequi.</p>
</div>

Answer 2

这样的东西会为您提供所需的东西 - 您可以根据自己的要求调整CSS样式。

<强> HTML

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

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

链接到JSFiddle：https://jsfiddle.net/7qLt8gcw/