分割线与边框嵌入文字

vant组件库中的实现

https://vant-contrib.gitee.io/vant/#/zh-CN/divider#yin-ru

vant的Divider组件，采用的是伪类，before+after实现，以下的实现代码

<style>
    .van-divider {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        margin: 16px 0;
        color: #969799;
        font-size: 14px;
        line-height: 24px;
        border-color: #ebedf0;
        border-style: solid;
        border-width: 0;
    }
    .van-divider--content-center::before, .van-divider--content-left::before, .van-divider--content-right::before {
        margin-right: 16px;
    }
      .van-divider--hairline::before, .van-divider--hairline::after {
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
      }
      .van-divider::before {
          content: '';
      }
      .van-divider::before, .van-divider::after {
          display: block;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          box-sizing: border-box;
          height: 1px;
          border-color: inherit;
          border-style: inherit;
          border-width: 1px 0 0;
      }
      .van-divider--content-center::after, .van-divider--content-left::after, .van-divider--content-right::after {
          margin-left: 16px;
          content: '';
      }
      .van-divider--hairline::before, .van-divider--hairline::after {
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
      }
      .van-divider::before, .van-divider::after {
          display: block;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          box-sizing: border-box;
          height: 1px;
          border-color: inherit;
          border-style: inherit;
          border-width: 1px 0 0;
      }
</style>
<div role="separator" class="van-divider van-divider--hairline van-divider--content-center"
     style="border-color: rgb(25, 137, 250); color: rgb(25, 137, 250); padding: 0px 16px;">
    Divider
</div>

fieldset+legend实现

https://developer.mozilla.org/zh-cn/docs/web/html/element/fieldset

fieldse，legend感觉很生疏，但它可是元老级的标签，并且它支持所有浏览器

<style>
    fieldset {
        border: 0;
        border-top: 1px solid #4083C9;
    }

    legend {
        padding: 0 10px;
    }
</style>

<fieldset>
    <legend>fieldset+legend</legend>
</fieldset>

fieldse，legend不隐藏其他边框，它是这样的

fieldse，legend 边框嵌套文字

https://css-tricks.com/how-to-add-text-in-borders-using-basic-html-elements/

<style>
    body{
        display: grid;
        margin: auto;
        margin-top: calc(50vh - 170px);
        width: 300px; height: 300px;
    }
    fieldset{
        border: 10px solid transparent;
        border-top-color: black;
        box-sizing: border-box;
        grid-area: 1 / 1;
        padding: 20px;
        width: inherit;
    }
    fieldset:nth-of-type(1){
        background: content-box center/contain no-repeat url("photo-1588852065463-5de1411ea697?w=400");
    }
    fieldset:nth-of-type(2){ transform: rotate(90deg); }
    fieldset:nth-of-type(3){ transform: rotate(180deg); }
    fieldset:nth-of-type(4){ transform: rotate(-90deg); }
    legend{
        font: 15pt/0 'Averia Serif Libre';
        margin: auto;
        padding: 0 4px;
    }
    fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); }

    body {
        user-select: none;
        -webkit-user-select: none;
    }
</style>

<fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>

多边框嵌入文字

<style>
    body{
        display: grid;
        margin: auto;
        margin-top: calc(50vh - 170px);
        width: 300px; height: 300px;
    }
    fieldset{
        border: 10px solid transparent;
        border-top-color: black;
        box-sizing: border-box;
        grid-area: 1 / 2;
        padding: 20px;
        width: 136px;
        border-radius: 10px;
    }
    fieldset:nth-of-type(1){ transform: rotate(22.5deg); }
    fieldset:nth-of-type(2){ transform: rotate(67.5deg); }
    fieldset:nth-of-type(3){ transform: rotate(112.5deg); }
    fieldset:nth-of-type(4){ transform: rotate(157.5deg); }
    fieldset:nth-of-type(5){ transform: rotate(-22.5deg); }
    fieldset:nth-of-type(6){ transform: rotate(-67.5deg); }
    fieldset:nth-of-type(7){ transform: rotate(-112.5deg); }
    fieldset:nth-of-type(8){ transform: rotate(-157.5deg); }
    legend{
        font: 15pt/11px 'Averia Serif Libre';
        background: white;
        margin: auto;
        padding: 0 4px;
    }

    body {
        user-select: none;
        -webkit-user-select: none;
    }
</style>
<fieldset><legend>One</legend></fieldset>
<fieldset><legend>Two</legend></fieldset>
<fieldset><legend>Three</legend></fieldset>
<fieldset><legend>Four</legend></fieldset>
<fieldset><legend>Eight</legend></fieldset>
<fieldset><legend>Seven</legend></fieldset>
<fieldset><legend>Six</legend></fieldset>
<fieldset><legend>Five</legend></fieldset>

其他

https://codepen.io/Chokcoco/pen/zYKbQpN