实例5，使用边框模拟 - 在线编辑器

          <style>
  .container {
    position: relative;
    background: green;
    text-align: center;
  }

  .main {
    border-left: 100px solid green; /* 同左边元素的宽度 */
    border-right: 100px solid green; /* 同右边元素的宽度 */
    background: black;
    color: white;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
  }
</style>

<div class="container">
  <div class="left">
    这是一行内容
  </div>
  <div class="main">
    这是多行内容
    <br>这是多行内容
    <br>这是多行内容
  </div>
  <div class="right">
    这是一行内容
  </div>
</div>

        