html - 自定义引导选项卡

Question

我目前正在开发一个需要使用自定义样式实现选项卡的项目。我坚持在自定义选项卡边框方面实现两件事。我需要将红色边框底部舍入，并添加右边框和下边框之间的距离，右边框高度应等于选项卡链接中文本的高度。附上我所完成的参考图像和代码，以便您获得更好的想法。任何帮助或建议将不胜感激。注意：使用的 Bootstrap 版本是 5.0

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
 />
 <style>
 .categories {
  padding-top: 25px;
  background-color: #f5f6fa;

}
.categories .category__item {
  border-right: 1px solid #dcdcdc;
}
.categories .category__link {
  color: #0b1320;
  font-size: 24px;
  opacity: 0.6;
  padding: 0 34px 14px 34px;
  transition: none;
}
.categories .category__link.active {
  background: transparent;
  border: none;
  color: #000;
  opacity: 1;
  font-weight: bold;
  border-bottom: 5px solid red;
}
 </style>
  <ul
      class="nav justify-content-center nav-tabs categories"
      id="myTab"
      role="tablist"
    >
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link active"
          id="home-tab"
          data-bs-toggle="tab"
          data-bs-target="#home"
          type="button"
          role="tab"
          aria-controls="home"
          aria-selected="true"
        >
          link1
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link2
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="contact-tab"
          data-bs-toggle="tab"
          data-bs-target="#contact"
          type="button"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          link3
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link4
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link5
        </button>
      </li>
    </ul>
<script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
 ></script>

标签： htmlcssbootstrap-5

Answer 1

您不能圆角边框的末端，但您可以应用圆角border-radius具有高度和宽度的元素的形状。

此解决方案将 a 应用于位于其父级底部边缘的伪元素border-radius。:after请注意，父级.categories .category__link现在具有样式position: relative;。

.categories {
    padding-top: 25px;
    background-color: #f5f6fa;

}
.categories .category__item {
    border-right: 1px solid #dcdcdc;
}
.categories .category__link {
    color: #0b1320;
    font-size: 24px;
    opacity: 0.6;
    padding: 0 34px 14px 34px;
    transition: none;
    position: relative;
}
.categories .category__link.active {
    background: transparent;
    border: none;
    color: #000;
    opacity: 1;
    font-weight: bold;
}
.categories .category__link.active:after {
    background-color: red;
    border-radius: 5px;
    content: '';
    bottom: -1px;
    display: block;
    height: 5px;
    left: 12.5%;
    position: absolute;
    width: 75%;
}
.nav-tabs .nav-link.active {
    background-color: transparent;
}

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<ul
  class="nav justify-content-center nav-tabs categories"
  id="myTab"
  role="tablist"
>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      link1
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link2
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#contact"
      type="button"
      role="tab"
      aria-controls="contact"
      aria-selected="false"
    >
      link3
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link4
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link5
    </button>
  </li>
</ul>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
  crossorigin="anonymous"
></script>