分割线集合 01

虚线

scss

.line-demo-01 {
  $line-solid-length: 6px;
  $line-dash-length: 3px;
  $line-color: #c21b2f;

  height: 1px;
  width: 100%;

  background: repeating-linear-gradient(
    to right,
    $line-color 0,
    $line-color $line-solid-length,
    transparent $line-solid-length,
    transparent ($line-solid-length + $line-dash-length)
  );
}

css var

.line-demo-01 {
  --line-solid-length: 6px;
  --line-dash-length: 3px;
  --line-color: #c21b2f;

  height: 1px;
  width: 100%;

  background: repeating-linear-gradient(
    to right,
    var(--line-color) 0,
    var(--line-color) var(--line-solid-length),
    transparent var(--line-solid-length),
    transparent calc(var(--line-solid-length) + var(--line-dash-length))
  );
}

考古网

某某栏目标题

html

<div class="kgw-column-title">
  <div class="title-text">某某栏目标题</div>
  <div class="title-decoration">
    <div class="diamond solid"></div>
    <div class="diamond outline"></div>
    <div class="diamond solid"></div>
    <div class="dotted-line"></div>
  </div>
</div>

scss

.kgw-column-title {
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;

  $color: #932913;

  $line-w: 4px;
  $line-gap: 2px;

  .title-text {
    color: $color; // 红棕色
    font-size: 36px;
    font-weight: bold;
    margin-right: 15px;
    white-space: nowrap;
  }

  .title-decoration {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -ms-flex-align: center;
    flex: 1;
    -ms-flex: 1 0 0%;

    .diamond {
      width: 10px;
      height: 10px;
      margin-right: 10px;
      transform: rotate(45deg);

      &.solid {
        background-color: $color; // 实心红棕色
        border: 1px solid $color; // 空心红棕色边框
      }

      &.outline {
        background-color: transparent;
        border: 1px solid $color; // 空心红棕色边框
      }
    }

    .dotted-line {
      flex: 1 0 0;
      -ms-flex: 1 0 0%;

      height: 1px;
      background: repeating-linear-gradient(
        to right,
        $color 0,
        $color $line-w,
        transparent $line-w,
        transparent $line-w + $line-gap
      );
      margin-left: 8px;
    }
  }
}