html - 右上角扩展按钮

Question

我需要按照下图创建导航

我已经成功地向下 flex 了右上角，但我不知道如何延伸左上角。

这是我使用的CSS

   .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn 
 {
    border-top-right-radius: 21px;
     border-bottom-right-radius: 0;
 }

Answer 1

据我所知，你无法扩展拐 Angular 。

但是，您可以使用 margin-left: -...px 和 z-index 使其正常工作。

.container {
  display: flex;
  background: gray;
  padding: 4px;
}

.nav-container {
  flex: 1;
}

.nav-container button {
  padding: 0 20px;
  height: 40px;
  border: 2px solid white;
  border-top-right-radius: 20px;
  margin-left: -20px; /* <--- THIS */
  position: relative;
}

.nav-container button:first-child {
  margin-left: 0;
  z-index: 2; /* <--- THIS */
}

.nav-container button:nth-child(2) {
  z-index: 1; /* <--- THIS */
}

.nav-container button:nth-child(3) {
  z-index: 0; /* <--- THIS */
}
.nav-container button:nth-child(odd) {
  background: #C38D8F;
}
.nav-container button:nth-child(even) {
  background: #CF1E22;
}

<div class="container">
  <div class="nav-container">
    <button>Home</button>
    <button>Partner</button>
    <button>Product</button>
  </div>
  <button>Log out</button>
</div>