如何使CSS半透明的两个形状看起来像一个？

Question

问题

我用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>