扩展按钮右上角

Question

我需要根据下图创建导航

我设法向右下弯，但是我不知道如何延伸左上角。

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

据我所知，您无法延长角落。

但是，您可以使用The IP address 127.0.0.1 is a special-purpose IPv4 address called localhost or loopback address. All computers use this address as their own but it doesn't let them communicate with other devices like a real IP address does. 和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;
}

Answer 2

我认为手动添加z-index到每个元素不是一个好方法，尤其是当您有更多元素时。

这里是一个想法，您可以使用伪元素创建重叠部分并获得更通用的解决方案。

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

.nav-container {
  flex: 1;
}

.nav-container {
  display:flex;
}
.nav-container button {
  padding: 0 0 0 25px;
  height: 40px;
  border: 2px solid white;
  position: relative;
}
.nav-container button::before {
  content:"";
  position:absolute;
  z-index:1;
  left:100%;
  top:-2px;
  bottom:-2px;
  width:20px;
  border: 2px solid white;
  border-left:none;
  background:inherit;
  border-top-right-radius: 20px;
}

.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>
    <button>more button</button>
    <button>again</button>
  </div>
  <button>Log out</button>
</div>

Answer 3

只需使用负值margin-right或margin-left来完成一个按钮与另一个按钮的重叠。 以下示例可以解决您的问题。

<div>
  <button class="btn">Product</button>
  <button class="btn">Partner</button>
  <button class="btn">Home</button>
</div>

button.btn {
  background-color: #f00;
  color: #fff;
  padding: 5px 10px;
  border-top-right-radius: 10px;
  margin-right: -7px;
  border: 1px solid #000;
  float: right;
}

希望这对您有帮助...