SOURCE

<div class="acp-divider is-left" style="border: 2px solid #b5b6bd;border-top: unset;">
    <div class="acp-divider__topline">
        <div class="acp-divider__left"></div>
        <div class="acp-divider--text">分割线</div>
        <div class="acp-divider__right"></div>
    </div>
    <div style="padding:10px;">asdasdasd</div>
</div>

.acp-divider {
  width: 100%;
  margin: 14px 0;
  position: relative;
  border-radius: 8px;
  &::before{
      content:"";
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 0 8px 0 0;
      border:2px solid #b5b6bd;
      border-left:unset;
      border-bottom: unset;
      z-index:1;
      right: -2px;
      top:0px;
  }
  &::after{
      content:"";
      position: absolute;
      right: -2px;
      width: 20px;
      height: 20px;
      border-radius: 8px 0 0 0;
      border:2px solid #b5b6bd;
      border-right:unset;
      border-bottom: unset;
      z-index:1;
      left: -2px;
      top:0px;
  }
  &__topline{
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    width: 99%;
    left: 50%;
    transform: translate(-50%,-11px);
  }
  &--text {

    padding: 0 10px;
    font-weight: 500;

        color: #8d8d99;

    font-size: 18px;
  }

  &__left,
  &__right {
    height: 2px;
 
    background: #b5b6bd;
  }
}

.is-left {
  .acp-divider__left {
    width: 5%;
  }

  .acp-divider__right {
    flex-grow: 1;
  }
}

.is-middle {
  .acp-divider__left {
    flex-grow: 1;
  }

  .acp-divider__right {
    flex-grow: 1;
  }
}

.is-right {
  .acp-divider__left {
    flex-grow: 1;
  }

  .acp-divider__right {
    width: 5%;
  }
}