如何使用花括号作为Div的左右边界

Question

我用下面的程序创建了一个小括号（左）的实例

span {
    width: 30px;
    height: 30px;
    display: inline-block;
}

.left-brace-tl {
    border-right: 2px solid grey;
    border-bottom-right-radius: 10px;
    margin-right:-6px;
    margin-top: 10px;
}
.left-brace-tr {
    margin-bottom: 10px;
    border-left: 2px solid grey;
    border-top-left-radius: 10px;
}
.left-brace-bl {
    margin-top: -4px;
    border-right: 2px solid grey;
    border-top-right-radius: 10px;
    margin-right:-6px;
}

.left-brace-br {
    margin-bottom: -8px;
    border-left: 2px solid grey;
    border-bottom-left-radius: 10px;
}

<div>
<span class="left-brace-tl"></span>
<span class="left-brace-tr"></span><br />
<span class="left-brace-bl"></span>
<span class="left-brace-br"></span>
</div>

虽然作为独立基础看起来不错，但是我想使用左（和右）花括号作为矩形div的左右边界

我非常感激我如何前进以实现这种目标

Answer 1

您可以通过使用内容来实现

.sample:before {
  content: "{";
  font-size: 42px;
}

.sample:after {
  content: "}";
  font-size: 42px;
}

<div class="sample">
  Sample Content
</div>