分割线与边框嵌入文字

vant组件库中的实现

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

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

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


    Divider

fieldset+legend实现

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

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

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

    legend {
        padding: 0 10px;
    }



    fieldset+legend

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

fieldse，legend 边框嵌套文字

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

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


Wash Your Hands
Stay Apart
Wear A Mask
Stay Home

多边框嵌入文字

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

One
Two
Three
Four
Eight
Seven
Six
Five

其他

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