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

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

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

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

@laiju的解决方案很好。我只是尝试用另一种方式来解决这个问题，旋转左花括号180度。我已经使用flex来对齐边框divs。我还修改了span的高度，使边框能够响应换行div's动态高度。

span {
  width: 10px;
  height: calc(50% - 10px);
  display: inline-block;
}

.rect {
  display: flex;
}

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

.right-border {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.content {
  width: 100px;
  height: 100px;
  background: yellow;
}

<div class="rect">

  <div class="left-border">
    <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 class="content"></div>
  <div class="right-border">
    <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>

一个不错的快速解决方案是将所有内容float: left，使其水平排列。

<!-- Your original brace, with 'float: left' added. -->
<div style="float: left;">
  <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>
<!-- Here is the content you want in the brace.
     I have set the height to 80px because it
     is roughly the size of your brace.
     The background-color property is just for show. -->
<div style="float: left; background-color: lightblue; height: 80px">
  You can put anything you like within this div now.
</div>
<!-- You would put your right brace here. 
     You should be able to create a right brace
     in a similar way to how you created the
     left brace. Just follow the same process.
     You will end up including it as follows. -->
<!--
<div style="float: left;">
  <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>
-->

Here's a screenshot of the result.
另一方面，你可能想把内联属性提取到一些CSS类中，你也可能想考虑不要在你原来的CSS中重新定义span，因为这会让你在以后遇到问题。

这不是一个合适的解决方案，因为它只给出了一个花括号而不是花括号，但它的优点是它是一个简单的只支持CSS的解决方案，不需要在HTML中添加额外的标记。有时候，这已经足够证明只使用括号而不是所需的大括号是合理的。

<div style="width: 250px; margin: 1em auto" class="lbracket rbracket">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
  consequat.
</div>

<div>上的内联CSS只是一个例子，重要的是lbracket和rbracket类：

.lbracket {
  border-left: thin solid black;
  padding-left: 1em;
  border-radius: 0.75em;
}
.rbracket {
  border-right: thin solid black;
  padding-right: 1em;
  border-radius: 0.75em;
}

这将产生类似于以下内容的结果：