2

i need to create navigation as per below image

enter image description here

I have managed to bend down the right corner but I dont know how to extend top left corner.

enter image description here

here is the CSS i have used

   .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;
 }
Rookie007
  • 1,229
  • 2
  • 18
  • 50
  • Are you asking how to push one button under the other one? Also the last button isn't taking the `border-top-right-radius: 21px;`, isnt it be there as your original image shows? – Subhendu Kundu Mar 04 '19 at 06:12
  • for your css `.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn` add padding-left:0 and margin-left:0; – Udhay Titus Mar 04 '19 at 06:12
  • @SubhenduKundu whichever the way all I need is first image output, – Rookie007 Mar 04 '19 at 06:18

3 Answers3

2

As I know, you can not extend the corner.

But, you can use margin-left: -...px and z-index to make it works.

.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>
Tan Dat
  • 2,888
  • 1
  • 17
  • 39
  • hi sorry for late response, actually the image you see is that when the user clicks on Partner button rest of the page opacity need to be changed its not color coding issue. can you help me with this? I have tried to change the opacity but it's still taking the whole button means z-index not working. – Rookie007 Mar 05 '19 at 02:43
  • Why would you use `opacity` instead of just changing the color? – Tan Dat Mar 05 '19 at 06:11
  • `opacity` is something user requirement. – Rookie007 Mar 05 '19 at 06:32
1

I don't think that manually adding z-index to each element is a good way to go especially if you will have more elements.

Here is an idea where you can use a pseudo element to create the overlapping part and have a more generic solution.

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

Overlapping of one button over another button can be done simply using margin-right or margin-left with negative value. The following example can solve your problem.

<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;
}

Hope this helps...

Praveenkumar Kalidass
  • 429
  • 4
  • 12