Как сделать так, чтобы полупрозрачные CSS-фигуры выглядели как одна?

Question

Задача

Я нарисовал 2 перекрывающихся фигуры с помощью CSS.
Поскольку это полупрозрачные, перекрывающиеся части выделяются.
Я хочу сделатьэто полупрозрачно при наведении, но можем ли мы что-то сделать, как синтезировать фигуры?

(Я также имею в виду, что конец transition двух цифр отличается ..)

---

Что я пытался

Я думал, что перекрывающаяся часть можетудалить с помощью overflow: hidden;, но это не относится к элементу & :: before, часть диагонали которого потеряна.

---

Проблема с центральным размещением

Я бы хотел централизованно выровнять буквы на вкладках таким образом.

---

Код

html { font-size: 62.5%; }
body { background-color: #c6d2dd; }
header { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }   /*  reset  */

header ul {
 list-style: none;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 overflow: hidden;
 width: 100%;
 margin-bottom: -1px;
}
header li {
 font-size: 1.5rem;
 height: 4.5rem;
 padding-left: .4rem;
}
header li:first-child {
 padding-left: 1.5rem;
}
header li:last-child {
 padding-right: .5rem;
}
header li > a {
 text-decoration: none;
 display: block;
 padding: 1rem 2rem;
 height: 100%;
 color: #fff;
 outline: none;
 transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
 position: relative;
 border-radius: 9px 5px 0 0;
}

/*  from here  */
header li > a:hover {    /*  The rectangular part on the right side  */
 background-color: rgba(255, 255, 255, 0.4);
 border-color: rgba(255, 255, 255, 0.4);
 transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
header li > a:hover::before {    /*  Part of oblique cut on the left side  */
 background-color: rgba(255, 255, 255, 0.4);
 border-color: rgba(255, 255, 255, 0.4);
 transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
 box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}
header li > a::before {    /*  Part of oblique cut on the left side  */
 content: '';
 position: absolute;
 z-index: 1;
 top: 0;
 left: -.4rem;
 bottom: 0;
 width: 1rem;
 transition: background-color 0.3s ease-in;
 transform: skew(-15deg);
 border-radius: 5px 0 0 0;
}

.current a {    /*  add from here  */
  border: 1px solid #fff;
  border-bottom-width: 0;
  z-index: 3;
  background-color: #9bacbb;
  pointer-events: none;
  margin-bottom: -3px;
}
.current a::before {
  border: 1px solid #fff;
  background-color: #9bacbb;
  margin: -1px 0 -3px -1px;
  z-index: 3;
  left: -.5rem;
}
.current a::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: -.4rem;
  bottom: 0;
  width: 1rem;
  transform: skew(-15deg);
  border-radius: 5px 0 0 0;
  margin-bottom: -3px;
  background-color: #9bacbb;
}

.content {
  display: flex;
  margin: 0 1rem 1rem 1rem;
  width: 100vw;
  height: 61.9rem;
  position: relative;
  background: #9bacbb;
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.5);
}

<header>
 <nav>
  <ul>
   <li class="111">
    <a href="#">
     111
    </a>
   </li>
   <li class="222">
    <a href="#">
     222
    </a>
   </li>
   <li class="333">
    <a href="#">
     333
    </a>
   </li>
   <li class="444">
    <a href="#">
     444
    </a>
   </li>
   <li class="current">
    <a href="#">
     555
    </a>
   </li>
  </ul>
 </nav>
</header>

<div class="content">    <!--  add  -->
  Hello world
</div>

Answer 1

Я бы сделал это по-другому только с одним элементом.Хитрость заключается в том, чтобы иметь перекос и скрыть переполненную часть справа:

проверить комментарий к коду

html { font-size: 62.5%; }
body { background-color: #c6d2dd; }
header { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }   /*  reset  */

header ul {
 list-style: none;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 overflow: hidden;
 width: 100%;
 margin-bottom: -1px;
}
header li {
 font-size: 1.5rem;
 height: 4.5rem;
 padding-left: .4rem;
}
header li:first-child {
 padding-left: 1.5rem;
}
header li:last-child {
 padding-right: .5rem;
}
header li > a {
 text-decoration: none;
 display: block;
 padding: 1rem 1rem 1rem 3rem; /*changed the padding*/
 margin-left:-2rem; /*create the overlap*/
 height: 100%;
 color: #fff;
 outline: none;
 transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
 position: relative;
 border-radius: 9px 5px 0 0;
 overflow:hidden; /*hide the overflow*/
 /*increase the z-index*/
 position:relative;
 z-index:2;
}

/*  from here  */
header li > a:hover {    /*  The rectangular part on the right side  */
 transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
 /*remove border and background from here*/
}
header li > a:hover::before {    /*  Part of oblique cut on the left side  */
 background-color: rgba(255, 255, 255, 0.4);
 border-color: rgba(255, 255, 255, 0.4);
 transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
 box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}
header li > a::before {    /*  Part of oblique cut on the left side  */
 content: '';
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 bottom: 0;
 right:0; /*make right:0*/
 transition: background-color 0.3s ease-in;
 transform: skew(-15deg);
 transform-origin:bottom right; /*change the origin*/
 border-radius: 5px 0 0 0;
}

.current a {   
  pointer-events: none;
  margin-bottom: -3px;
  border-right: 1px solid #fff;
}
.current a::before {
  border: 1px solid #fff;
  background-color: #9bacbb;
}


.content {
  display: flex;
  margin: 0 1rem 1rem 1rem;
  width: 100vw;
  height: 61.9rem;
  position: relative;
  background: #9bacbb;
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.5);
}

<header>
 <nav>
  <ul>
   <li class="111">
    <a href="#">
     111
    </a>
   </li>
   <li class="222">
    <a href="#">
     222
    </a>
   </li>
   <li class="333">
    <a href="#">
     333
    </a>
   </li>
   <li class="444">
    <a href="#">
     444
    </a>
   </li>
   <li class="current">
    <a href="#">
     555
    </a>
   </li>
  </ul>
 </nav>
</header>
<div class="content">    <!--  add  -->
  Hello world
</div>