如何使用 Bootstrap 5 面包屑创建类似箭头的步进器

Question

我正在尝试创建一个类似于此示例中的步进器。

我通过使用

text-bg-success

上的

text-bg-primary

或

breadcrumb-item

类对步进器应用着色，如下所示。

但是，步骤之间的间隙看起来像菱形，而不是指向页面语言方向的 V 形箭头（ltr：右箭头，rtl：左箭头）

如何将每个步骤之间的间隙更改为箭头而不是菱形？

.breadcrumb-chevron {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    gap: .5rem;
}

    .breadcrumb-chevron .breadcrumb-item {
        display: flex;
        gap: inherit;
        align-items: center;
        padding-left: 0;
        line-height: 1;
    }

        .breadcrumb-chevron .breadcrumb-item::before {
            gap: inherit;
            float: none;
            width: 1rem;
            height: 1rem;
        }

.breadcrumb-custom .breadcrumb-item {
    position: relative;
    flex-grow: 1;
    padding: .75rem 3rem;
}

    .breadcrumb-custom .breadcrumb-item::before {
        display: none;
    }

    .breadcrumb-custom .breadcrumb-item::after {
        position: absolute;
        top: 50%;
        right: -25px;
        z-index: 1;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        content: "";
        background-color: var(--bs-tertiary-bg);
        border-top-right-radius: .5rem;
        box-shadow: 1px -1px var(--bs-border-color);
        transform: scale(.707) rotate(45deg);
    }

    .breadcrumb-custom .breadcrumb-item:first-child {
        padding-left: 1.5rem;
    }

    .breadcrumb-custom .breadcrumb-item:last-child {
        padding-right: 1.5rem;
    }

        .breadcrumb-custom .breadcrumb-item:last-child::after {
            display: none;
        }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <nav aria-label="breadcrumb" class="my-3">
      <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
              <li class="breadcrumb-item text-bg-success">
  Step 1            </li>
              <li class="breadcrumb-item text-bg-primary active" aria-current="page">
                          <i class="fa-solid fa-pen-to-square"></i>
                      <a class="fw-semibold text-decoration-none text-white" href="/blank1/Subscription/4c084aht14hc67nxhfpa8e9kw0/Signup/Step/Payment">
                          Step 2
                      </a>
              </li>
      </ol>
  </nav>
</div>

Answer 1

看来你需要在这里改变背景颜色和盒子阴影：

 .breadcrumb-custom .breadcrumb-item::after {

        background-color: var(--bs-tertiary-bg);

        box-shadow: 1px -1px var(--bs-border-color);

所以，让它继承背景颜色，盒子阴影可以去掉，或者让它继承文本颜色：

.breadcrumb-custom .breadcrumb-item::after {

        background-color: inherit;

        box-shadow: 1px -1px currentcolor;

演示：

.breadcrumb-chevron {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    gap: .5rem;
}

    .breadcrumb-chevron .breadcrumb-item {
        display: flex;
        gap: inherit;
        align-items: center;
        padding-left: 0;
        line-height: 1;
    }

        .breadcrumb-chevron .breadcrumb-item::before {
            gap: inherit;
            float: none;
            width: 1rem;
            height: 1rem;
        }

.breadcrumb-custom .breadcrumb-item {
    position: relative;
    flex-grow: 1;
    padding: .75rem 3rem;
}

    .breadcrumb-custom .breadcrumb-item::before {
        display: none;
    }

    .breadcrumb-custom .breadcrumb-item::after {
        position: absolute;
        top: 50%;
        right: -25px;
        z-index: 1;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        content: "";
        background-color: inherit;
        border-top-right-radius: .5rem;
        box-shadow: 1px -1px currentcolor;
        transform: scale(.707) rotate(45deg);
    }

    .breadcrumb-custom .breadcrumb-item:first-child {
        padding-left: 1.5rem;
    }

    .breadcrumb-custom .breadcrumb-item:last-child {
        padding-right: 1.5rem;
    }

        .breadcrumb-custom .breadcrumb-item:last-child::after {
            display: none;
        }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <nav aria-label="breadcrumb" class="my-3">
      <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
              <li class="breadcrumb-item text-bg-success">
  Step 1            </li>
              <li class="breadcrumb-item text-bg-primary active" aria-current="page">
                          <i class="fa-solid fa-pen-to-square"></i>
                      <a class="fw-semibold text-decoration-none text-white" href="/blank1/Subscription/4c084aht14hc67nxhfpa8e9kw0/Signup/Step/Payment">
                          Step 2
                      </a>
              </li>
      </ol>
  </nav>
</div>