html - 扩展按钮右上角

我需要按照下图创建导航

我已经设法弯下了右下角，但我不知道如何延长左上角。

这是我用过的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;
 }

最佳答案

据我所知，你不能把拐角伸过去。
但是，您可以使用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>